jquery autocomplete插件结合ajax使用demo
本文共 4210 字，大约阅读时间需要 14 分钟。
转自：
autocomplete是jqueryUI里的一个插件
效果和说明可以访问这里，作用类似于搜索时的自动提示：
今天项目中用到了这个插件
首先是引入文件，除了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的请求。
下面转自：
最近做的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>
最终的效果如下图：
转载地址：http://xjxci.baihongyu.com/
你可能感兴趣的文章
fhs-framework springboot mybatis 解决表关联查询问题的关键方案-翻译服务
查看>>
ZUUL2 使用场景
查看>>
Spring AOP + Redis + 注解实现redis 分布式锁
查看>>
elastic-job 和springboot 集成干货
查看>>
php开发微服务注册到eureka中(使用sidecar)
查看>>
mybatis mybatis plus mybatis jpa hibernate spring data jpa比较
查看>>
支付宝生活号服务号 用户信息获取 oauth2 登录对接 springboot java
查看>>
CodeForces #196(Div. 2) 337D Book of Evil （树形dp）
查看>>
uva 12260 - Free Goodies （dp，贪心 | 好题）
查看>>
uva-1427 Parade （单调队列优化dp）
查看>>
【设计模式】学习笔记13：组合模式（Composite）
查看>>
hdu 1011 Starship Troopers （树形背包dp）
查看>>
hdu 1561 The more, The Better (树形背包dp)
查看>>
【设计模式】学习笔记14：状态模式（State）
查看>>
poj 1976 A Mini Locomotive （dp 二维01背包)
查看>>
Java链式编程（Stream流）
查看>>
系统恢复的，我也不知道什么东西
查看>>
flash 系统字体
查看>>
HDFS Permissions Guide
查看>>
斯坦福大学机器学习——因子分析（Factor analysis）
查看>>