本文介绍如何使用 jQuery UI 的 AutoComplete 插件结合 AJAX 实现动态数据填充功能，并展示了如何利用缓存减少 AJAX 请求次数。
jquery autocomplete插件结合ajax使用demo
3人收藏此文章, 我要收藏 发表于1年前(2012-06-26 16:20) , 已有1749次阅读 ，共0个评论
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 | 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的请求。
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
