基于bootstrap插件实现autocomplete自动完成表单,提供脚本代码,用例,以及后台服务端(php)， 原文有些没说清楚的地方，希望能帮助大家.
首先肯定还是加载bootstrap&jquery了，需要额外说明的是,后端返回的二维数组,和formatitem方法下面的调用保持一致即可;
另外,返回的数据要先parsejson!切记。
相关参数说明：
source：function(query,process){}。query表示当前文本输入框中的字符串，可在该方法中通过ajax向后台请求数据（数组形式的json对象），然后将返回的对象作为process的参数；
formatitem：function(item){}。对返回数据的具体某个json对象转化为字符串格式，用以显示在提示列表中，返回值：字符串；
setvalue：function(item){}。选中提示列表某项时，设置文本输入框中显示的值以及实际需要获取的值。返回值格式：{'data-value':item[输入框显示值的item属性],'real-value':item[实际需要获取值的item属性]}，后期可通过文本输入框的real-value属性获取该值；
items：自动完成提示的最大结果集数量，默认：8；
minlength：当前文本输入框中字符串达到该属性值时才进行匹配处理，默认：1；
delay：指定延时毫秒数后，才正真向后台请求数据，以防止输入过快导致频繁向后台请求，默认：500
基于bootstrap插件实现autocomplete自动完成表单，代码如下
1.代码

2. $data为一个二维数组
echo json_encode( $data )
3. 需要返回的标准json格式
[code][{iccid:12345678901234567890,mobile:1850000},{iccid:12345785,mobile:1850001}][code]
bootstrap自动完成控件autocomplete是基于bootstrap自带控件typeahead改造而来，因为 typeahead不支持复杂的对象。
//示例代码如下： $('#autocompleteinput').autocomplete({ source:function(query,process){ var matchcount = this.options.items;//返回结果集最大数量 $.post(/bootstrap/region,{matchinfo:query,matchcount:matchcount},function(respdata){ return process(respdata); }); }, formatitem:function(item){ return item[regionname]+(+item[regionnameen]+，+item[regionshortnameen]+) - +item[regioncode]; }, setvalue:function(item){ return {'data-value':item[regionname],'real-value':item[regioncode]}; } }); $(#gobtn).click(function(){ //获取文本框的实际值 var regioncode = $(#autocompleteinput).attr(real-value) || ; alert(regioncode); });
以上就是本文的全部内容，希望对大家的学习有所帮助。