jquery autocomplete插件结合ajax使用demo

文章转自   http://www.2cto.com/kf/201206/138104.html

jquery autocomplete插件结合ajax使用demo

首先是引入文件，除了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         var cache = {};
04         $( "#tags" ).autocomplete({
05             source: function(request, response ) {
06                 var term = request.term;
07                 if ( term in cache ) {
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的请求。

 作者：艮子明