- 文章转自 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的请求。作者：艮子明