Ajax AutoComplete for jQuery(类似google,baidu的提示功能)
Ajax AutoComplete for jQueryjQuery的自动完成插件,方便创建input或者boxs类自动完成功能,只依赖于jQuery. 压缩过后文件大小只有2.7K(jquery.autocomplete.js) API
用例HTML: <input type="text" name="country" id="autocomplete"/> Ajax 请求: $('#autocomplete').autocomplete({ serviceUrl: '/autocomplete/countries',onSelect: function (suggestion) { alert('You selected: ' + suggestion.value + ',' + suggestion.data); } }); 本地数据 (no ajax): var countries = [ { value: 'Andorra',data: 'AD' },// ... { value: 'Zimbabwe',data: 'ZZ' } ]; $('#autocomplete').autocomplete({ lookup: countries,' + suggestion.data); } }); 样式自带样式是下面这样的,特殊样式请自行修改 html: <div class="autocomplete-suggestions"> <div class="autocomplete-suggestion autocomplete-selected">...</div> <div class="autocomplete-suggestion">...</div> <div class="autocomplete-suggestion">...</div> </div> css: .autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; } .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; } .autocomplete-selected { background: #F0F0F0; } .autocomplete-suggestions strong { font-weight: normal; color: #3399FF; } Response 数据结构后台返回数据必须为JSON格式的JS对象. { query: "Unit",suggestions: [ { value: "United Arab Emirates",data: "AE" },{ value: "United Kingdom",data: "UK" },{ value: "United States",data: "US" } ] } 数据可以是字符串或对象,会被传入格式化函数formatResults作为onSelect的callback.没有数据的情况下可以做一个默认的假数据作为候补. { query: "Unit",suggestions: ["United Arab Emirates","United Kingdom","United States"] } 不符合标准数据要求的情况如果你的ajax服务器需要不同的query结构,返回的数据格式也不符合本插件要求的话,用一下接口修改. $('#autocomplete').autocomplete({ paramName: 'searchString',transformResult: function(response) { return $.map(response.myData,function(dataItem) { return {value: dataItem.valueField,data: dataItem.dataField}; }); } }) 注意:query必须和插件绑定的input的value相同,不然suggestions的数据不会被显示. 协议使用类MIT协议的组织或个人可以自由使用本插件,需要留版权信息.MIT-style license. 作者Tomas Kirda / @tkirda 文档翻译Tiankui / @github
转自:http://tiankui.github.io/jQuery-Autocomplete/
实战:
1.引用js <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript" src="jquery.autocomplete.js"></script>
2.引用css .autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; } .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; } .autocomplete-selected { background: #F0F0F0; } .autocomplete-suggestions strong { font-weight: normal; color: #3399FF; } 3.页面标签 <input type="text" name="email" id="email" /> 4.构造请求 <script type="text/javascript" > $(function(){ $('#email').autocomplete({ serviceUrl: 'email.do?opr=getEmails',/* extraParams: { email: function(){ return $.trim($("#email").val()); } },*/ extraParams: {email:$.trim($("#username").val())},//动态参数值 paramName: "email",//自定义的参数名 width: 200,//宽度 scrollHeight: 300,//提示的高度,溢出显示滚动条 matchContains: true,//包含匹配,就是data参数里的数据,是否只要包含文本框里的数据就显示 autoFill: false,//自动填充 dataType: 'json',//数据类型 deferRequestBy:500//keyUp之后发起请求的间隔时间. Default: 0. }); }); </script> 5.返回响应 action中可以通过request.getParameter("email");获取检索参数 得到参数后可以执行查询。这里假定得到的查询结果是如下 { query:'wang',//前台输入的查询内容 suggestions:[{value:'wangfang@yeah.net',data:'wang'},{value:'wangJANG@yeah.net',data:'wang'},{value:'wangXiaoLong@yeah.net',data:'wang'}] //这里就是下拉框里显示的数据了 和下面的data是对应的 属于一键一值 //这里和suggestions对应 作为suggestions的键 } 其他参考: http://www.cnblogs.com/maxiao/archive/2012/04/25/2470712.html http://uule.iteye.com/blog/1046973 http://blog.sina.com.cn/s/blog_62a8fd490100ffz0.html http://songjianyong.iteye.com/blog/1407142 https://github.com/devbridge/jQuery-Autocomplete (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |