基于bootstrap插件实现autocomplete自动完成表单

基于bootstrap插件实现autocomplete自动完成表单

首先肯定还是加载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-vahttp://lue属性获取该值；

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:functioIpPwvpFKGbn(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);

});

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。