Ajax AutoComplete for jQuery(类似google,baidu的提示功能)
2013-07-26 18:11
671 查看
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'}
lookupFilter:
function (suggestion, query, queryLowerCase) {}数据为本地时对数据进行过滤的函数.默认只会进行很愚蠢的局部匹配.
onSelect:
function (suggestion) {}选择suggestions之后的回调函数,this对象和绑定的input关联
minChars: 做少显示多少个选项. Default:
1.
maxHeight: suggestions container 的最大像素高度. Default:
300.
deferRequestBy: keyUp之后发起请求的间隔时间. Default:
0.
width: Suggestions 的样式宽度, e.g.: 300. Default:
auto,默认等于input field 的宽度.
params: 额外添加的请求参数,可选属性.
formatResult:
function (suggestion, currentValue) {}格式化suggestions container中的suggestion entry, 可选属性.
delimiter: 字符串或者正则,splits字符串并把得出数组的最后一项作为query进行请求.当需要分别对两个或者以上的词汇进行自动完成时很有用.
zIndex: 'z-index' 默认
9999.
type: XHR类型. Default:
GET.
noCache: 设置是否缓存ajax结果的布尔值. 默认
true.
onSearchStart:
function (query) {}ajax请求之前被调用,可用于前端验证,(译者注)
this被绑定在input上.
onSearchComplete:
function (query) {}请求成功之后的回调.
this被绑定在input上.
tabDisabled: 默认
false. 设置为true的话,用户选择结果之后,鼠标指针会blur,默认行为是focus.
paramName: 默认
query. query词的键名.
transformResult:
function(response){}Ajax请求完成后用于调节response.suggestions的格式.
autoSelectFirst: 如果设置为
true,将默认选择第一个结果. 默认
false.
appendTo: suggestions container 被插入的地方.默认是
body.可以是jQuery对徐昂, 选择器或html元素.确定已经设置
position: absoluteor
position: 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-stylelicense.
作者
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
相关文章推荐
- 实现输入内容提示的功能(仿google_百度输入框提示)jquery.ui.autocomplete.js插件
- 用ASP+jQuery.autocomplete.js实现仿google自动提示功能
- 实现输入内容提示的功能(仿google_百度输入框提示)jquery.ui.autocomplete.js插件
- 用 jQuery + Ajax 实现 Google 的输入提示功能
- 用jQuery + Ajax实现Google输入提示功能
- 搜索功能提示(类似google和baidu)
- jquery实现搜索框自动补全功能,类似google搜索引擎,数据是用Ajax从后台获得
- jquery实现百度类似搜索提示功能(AJAX应用)
- 使用FlexBox和Json实现类似ComboBox(类似Google的输入提示和自动)功能-基于JQuery-ASP.NET
- JQuery.autocomplete扩展功能:实现多列自动提示
- UpdatePanel中GridView的分页问题 GridView中的超链接 (输入一半带提示功能)ASP.NET AJAX Control Toolkit 新扩展特性:AutoCompleteExtender
- Jquery实现类似Google autocomplete
- Jquery实现类似Google autocomplete
- 网页自动补齐,利用 Ajax Autocomplete for jQuery插件
- 用jQuery + Ajax实现Google输入提示功能
- 谁能用jQuery和Ajax做的访问ado.net程序-----跪求各位大侠(有相似的也可以,只要实现的是类似的功能就可以)
- AutoCompleteExtender控件实现类似百度,谷歌,雅虎的下拉提示
- jquery ui autocomplete 模拟百度搜索自动提示
- 具有自动提示功能的菜单:AutoCompleteTextView
- jquery autocomplete ajax获取动态数据,兼容各浏览器,支持中文