基于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 相关文章推荐
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 Javascript
详解javascript遍历方式
Nov 11 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
vue-cli如何添加less 以及sass
Jul 06 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 Javascript
jQuery实现简单评论区功能
Oct 26 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
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
涉外经济法专业毕业生推荐信
2013/11/24 职场文书
副总经理工作职责
2013/11/28 职场文书
创业计划书中要认真思考的问题
2013/12/28 职场文书
同学聚会邀请函
2015/01/30 职场文书
2014年度个人总结范文
2015/03/09 职场文书
2015年度企业工作总结
2015/05/21 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
运动会观后感
2015/06/09 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
卖车协议书范文
2016/03/23 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书