| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
jopen
12年前发布

jquery autocomplete插件结合ajax使用demo

autocomplete是jqueryUI里的一个插件

效果和说明可以访问这里,作用类似于搜索时的自动提示:

http://jqueryui.com/demos/autocomplete/#default

今天项目中用到了这个插件

首先是引入文件,除了juqery和juqeryUI的基本文件外,还需要引入下面的文件

    <!-- autocomplete -->      <script src="<%=request.getContextPath()%>/share/js/jqueryPlugin/autoComplete/jquery.ui.core.js"></script>      <script src="<%=request.getContextPath()%>/share/js/jqueryPlugin/autoComplete/jquery.ui.widget.js"></script>      <script src="<%=request.getContextPath()%>/share/js/jqueryPlugin/autoComplete/jquery.ui.position.js"></script>      <script src="<%=request.getContextPath()%>/share/js/jqueryPlugin/autoComplete/jquery.ui.autocomplete.js"></script>

接下来就是使用,js文件如下:

$( "#tags" ).autocomplete({              source: function( request, response ) {                  $.ajax({                      url: "sql/sqlgetWebsqlDataBaseInforAjax",                      dataType: "json",                      data:{                          searchDbInforItem: request.term                      },                      success: function( data ) {                          response( $.map( data, function( item ) {                              return {                                  dbId:item.dbid,                                  jdbcUrl:item.jdbcUrl,                                  ip:item.ip,                                  port:item.port,                                  sch:item.sch,                                  username: item.username,                                  password:item.password,                                  value: item.labelview                              }                          }));                      }                  });              },              minLength: 1,              select: function( event, ui ) {                  $("#dbInforDdId").val(ui.item.dbId);                  $("#dbInforDdjdbcUrl").val(ui.item.jdbcUrl);                  $("#dbInforIp").val(ui.item.ip);                  $("#dbInforPort").val(ui.item.port);                  $("#dbInforSch").val(ui.item.sch);                  $("#dbInforUserName").val(ui.item.username);                  $("#dbInforPassword").val(ui.item.password);              }          });

这段脚本是给tag这个input加入autocomplete插件,然后通过request.term取到模糊搜索的词,然后调用ajax返回一个json串到response中,其中用到了一个map函数。然后实现select方法,即把response的item通过ui.item写入到各个input中。实现数据自动填充。

其中,有个label和value参数,lable是下拉框中显示的值,value是选中后自动填充的值,可以分别设置,也可以只设置一个,例如我就只设置一个value。

效果如下:

 jquery autocomplete插件结合ajax使用demo

接下来,对这个脚本加以改进,加入cache,这样就不用每次都通过ajax来获取。改进的脚本如下:

 

//autocomplete插件          //缓存          var cache = {};          $( "#tags" ).autocomplete({              source: function(request, response ) {                  var term = request.term;                  if ( term in cache ) {                      response( $.map( cache[ term ], function( item ) {                          return {                              dbId:item.dbid,                              jdbcUrl:item.jdbcUrl,                              ip:item.ip,                              port:item.port,                              sch:item.sch,                              username: item.username,                              password:item.password,                              value: item.labelview                          }                      }));                      return;                  }                  $.ajax({                      url: "sql/sqlgetWebsqlDataBaseInforAjax",                      dataType: "json",                      data:{                          searchDbInforItem: request.term                      },                      success: function( data ) {                          cache[ term ] = data;                          response( $.map( data, function( item ) {                              return {                                  dbId:item.dbid,                                  jdbcUrl:item.jdbcUrl,                                  ip:item.ip,                                  port:item.port,                                  sch:item.sch,                                  username: item.username,                                  password:item.password,                                  value: item.labelview                              }                          }));                      }                  });              },              minLength: 1,              select: function( event, ui ) {                  $("#dbInforDdId").val(ui.item.dbId);                  $("#dbInforDdjdbcUrl").val(ui.item.jdbcUrl);                  $("#dbInforIp").val(ui.item.ip);                  $("#dbInforPort").val(ui.item.port);                  $("#dbInforSch").val(ui.item.sch);                  $("#dbInforUserName").val(ui.item.username);                  $("#dbInforPassword").val(ui.item.password);              }          });

效果是一样的,只是第二次的时候从缓存中取得了数据不用再调用ajax了。

总结一下,autocomplete是jqueryUI的一个插件,可以实现自动填充的功能。它的source支持string和ajax传过来的json,另外还支持jsonp(没有深入研究)。可以改进脚本,加入cache来减少ajax的请求。

 

 本文由用户 jopen 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1340957775905.html
jQuery自动完成插件 jQuery插件 Ajax