jquery autocomplete插件结合ajax使用demo

转自：http://my.oschina.net/zimingforever/blog/63877

autocomplete是jqueryUI里的一个插件

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

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

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

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

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

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

01 $( "#tags").autocomplete({
02             source:function( request, response ) {
03                 $.ajax({
04                     url:"sql/sqlgetWebsqlDataBaseInforAjax",
05                     dataType:"json",
06                     data:{
07                         searchDbInforItem: request.term
08                     },
09                     success:function( data ) {
10                         response( $.map( data,function( item ) {
11                             return{
12                                 dbId:item.dbid,
13                                 jdbcUrl:item.jdbcUrl,
14                                 ip:item.ip,
15                                 port:item.port,
16                                 sch:item.sch,
17                                 username: item.username,
18                                 password:item.password,
19                                 value: item.labelview
20                             }
21                         }));
22                     }
23                 });
24             },
25             minLength: 1,
26             select:function( event, ui ) {
27                 $("#dbInforDdId").val(ui.item.dbId);
28                 $("#dbInforDdjdbcUrl").val(ui.item.jdbcUrl);
29                 $("#dbInforIp").val(ui.item.ip);
30                 $("#dbInforPort").val(ui.item.port);
31                 $("#dbInforSch").val(ui.item.sch);
32                 $("#dbInforUserName").val(ui.item.username);
33                 $("#dbInforPassword").val(ui.item.password);
34             }
35         });

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

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

效果如下：

 

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

 

01 //autocomplete插件
02         //缓存
03         varcache = {};
04         $("#tags" ).autocomplete({
05             source:function(request, response ) {
06                 varterm = request.term;
07                 if( term incache ) {
08                     response( $.map( cache[ term ],function( item ) {
09                         return{
10                             dbId:item.dbid,
11                             jdbcUrl:item.jdbcUrl,
12                             ip:item.ip,
13                             port:item.port,
14                             sch:item.sch,
15                             username: item.username,
16                             password:item.password,
17                             value: item.labelview
18                         }
19                     }));
20                     return;
21                 }
22                 $.ajax({
23                     url:"sql/sqlgetWebsqlDataBaseInforAjax",
24                     dataType:"json",
25                     data:{
26                         searchDbInforItem: request.term
27                     },
28                     success:function( data ) {
29                         cache[ term ] = data;
30                         response( $.map( data,function( item ) {
31                             return{
32                                 dbId:item.dbid,
33                                 jdbcUrl:item.jdbcUrl,
34                                 ip:item.ip,
35                                 port:item.port,
36                                 sch:item.sch,
37                                 username: item.username,
38                                 password:item.password,
39                                 value: item.labelview
40                             }
41                         }));
42                     }
43                 });
44             },
45             minLength: 1,
46             select:function( event, ui ) {
47                 $("#dbInforDdId").val(ui.item.dbId);
48                 $("#dbInforDdjdbcUrl").val(ui.item.jdbcUrl);
49                 $("#dbInforIp").val(ui.item.ip);
50                 $("#dbInforPort").val(ui.item.port);
51                 $("#dbInforSch").val(ui.item.sch);
52                 $("#dbInforUserName").val(ui.item.username);
53                 $("#dbInforPassword").val(ui.item.password);
54             }
55         });

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

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

 

下面转自：http://mahilion.blog.163.com/blog/static/183087295201152882420599/

最近做的erp系统上需要用到了jquery autocomplete这个插件，就下了个玩玩。它是一个很不错的插件。

下面将我的例子贴出来：

$(function(){

 var rows = [];

$.getJSON('<%=basePath%>depot/getProductsJson',function(data){

$.each(data.prolist,function(i,value){ 

// $("#id1").append("<option value='"+value.pro_ID+"'>"+value.pro_Name+"</option>");

rows[rows.length] = { 

data:data.prolist[i], 

value:data.prolist[i].pro_ID,       

result:data.prolist[i].pro_Name

};

});

//alert(rows[1].result);

$("#id1").autocomplete(rows, {

matchContains:1,

scrollHeight: 250,

matchContains: true,

width:150,

max:50,

formatItem: function(row,i,max) {

//alert(item); 

return row.result;

},

formatMatch: function(row, i, max) {

return row.result+row.value;

},

formatResult: function(row) {  

return row.result;  

}  

}).result(function(event, data, formatted) {

//$("#id2").val(data.value);

});

});

 

});

下面是部分jsp代码，由于太长了不方便贴，所以只贴了部分。

<td width="25%">产品名称：<s:textfield id="id1" /></td>

 <td width="25%">数量：<s:textfield id="id4" /></td>

<td width="15%">釉色：<s:select id="id2"  list="{}"/></td>

  <td width="15%"> 等级：<s:select id="id3"  list="{}"/></td>

最终的效果如下图：