当前位置：首页 > 资讯 > 技术文档

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

时间：2021-01-18 00:24 编辑：来源：阅读：
扫一扫，手机访问

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

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

<script>
$('#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"]};
 }
});
</script>

2. $data为一个二维数组 echo json_encode( $data ) 3. 需要返回的标准json格式 [code][{"iccid":"12345678901234567890","mobile":"1850000"},{"iccid":"12345785","mobile":"1850001"}][code] [b]Bootstrap自动完成控件Autocomplete[/b]是基于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);
 });

如果大家还想深入学习，可以点击[url=http://www.1sucai.cn/article/84087.htm]这里[/url]进行学习，再为大家附3个精彩的专题： [url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url] [url=http://www.1sucai.cn/Special/854.htm]Bootstrap插件使用教程[/url] 以上就是本文的全部内容，希望对大家的学习有所帮助。

全部评论(0)

上一篇：JavaScript下申明对象的几种方法小结
下一篇：ES6概念 Symbol.keyFor()方法

资讯排行榜
更多>>