Ajax AutoComplete for jQuery
jQuery的自动完成插件,方便创建input或者boxs类自动完成功能,只依赖于jQuery.
压缩过后文件大小只有2.7K(jquery.autocomplete.js)
API$(selector).autocomplete(options);绑定插件到所选input.(可为多个)options: 对于插件行为的逐条定义,等于是settings.serviceUrl: 服务器请求地址,本地数据的设置lookup.lookup:suggestion组成的数组,suggestion可以是字符串数组或对象数组.suggestion: 单体数据字符串或后面这种 { ‘value’: ‘string’, ‘data’: ‘any’}onSearchStart: function (query) {} ajax请求之前被调用,可用于前端验证,(译者注)this 被绑定在input上.appendTo: suggestions container 被插入的地方.默认是body.可以是jQuery对徐昂, 选择器或html元素.确定已经设置position: absolute orposition: relative 在被绑定元素上.用例
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,onSelect: function (suggestion) {alert(‘You selected: ‘ + suggestion.value + ‘, ‘ + 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
转自：
实战：
1.引用js
<script type=src=></script><script type=src=></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=name=id="email" />
4.构造请求
<script type=>$(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");获取检索参数
得到参数后可以执行查询。这里假定得到的查询结果是如下
画龙画虎难画骨，知人知面不知心。
