autocomplete source ajax详解,基于bootstrap插件实现autocomplete自动完成表单

delay：指定延时毫秒数后，才正真向后台请求数据，以防止输入过快导致频繁向后台请求，默认：500

基于bootstrap插件实现autocomplete自动完成表单，代码如下

1.代码

$('#sim_iccid').autocomplete({

source:function(query,process){

var matchCount = this.options.items;//允许返回结果集最大数量

$.get("http://www.soyiyuan.com/update/",{"iccid":query,"matchCount":matchCount},function(respData){

respData = $.parseJSON(respData);//解析返回的数据

return process(respData);

});

},formatItem:function(item){

return item["iccid"]+"("+item["mobile"]+")";

},setValue:function(item){

return {'data-value':item["iccid"],'real-value':item["mobile"]};

}

});

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,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);

});

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

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。