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

前端之家收集整理的这篇文章主要介绍了基于bootstrap插件实现autocomplete自动完成表单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

基于bootstrap插件实现autocomplete自动完成表单,提供脚本代码,用例,以及后台服务端(PHP), 原文有些没说清楚的地方,希望能帮助大家.

首先肯定还是加载bootstrap&jquery了,需要额外说明的是,后端返回的二维数组,和formatItem方法下面的调用保持一致即可; 另外,返回的数据要先parseJSON!切记。

相关参数说明:

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.代码

$('#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);
});

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

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

猜你在找的Bootstrap相关文章