基于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 相关文章推荐
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
Javascript操作表单实例讲解(下)
Jun 20 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
详解VUE调用本地json的使用方法
May 15 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 Javascript
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
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
javascript 常用功能总结
2012/03/18 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
2019/10/26 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
Python类super()及私有属性原理解析
2020/06/15 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
学生会辞职信
2015/03/02 职场文书
百家讲坛观后感
2015/06/12 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript
Python简易开发之制作计算器
2022/04/28 Python