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


Posted in Javascript onMay 07, 2016

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

<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]

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

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

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

Javascript 相关文章推荐
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 #Javascript
js实现上传图片及时预览
May 07 #Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 #Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 #Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 #Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 #Javascript
JavaScript数组方法总结分析
May 06 #Javascript
You might like
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
js 解决“options为空或不是对象”
2008/12/22 Javascript
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
浅析Python中return和finally共同挖的坑
2017/08/18 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
python字符串格式化方式解析
2019/10/19 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
《孔繁森》教学反思
2014/04/17 职场文书
人力资源职位说明书
2014/07/29 职场文书
学习十八大演讲稿
2014/09/15 职场文书
怎样写离婚协议书
2015/01/26 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
python如何获取网络数据
2021/04/11 Python