基于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类中获取外部函数名的方法与代码
Sep 12 Javascript
用JavaScript显示随机图像或引用
Apr 21 Javascript
javascript正则表达式中参数g(全局)的作用
Nov 11 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 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
PHP中feof()函数实例测试
2014/08/23 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
eclipse php wamp配置教程
2016/06/30 PHP
php微信开发之图片回复功能
2018/06/14 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
对javascript继承的理解
2016/10/11 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
Python实例一个类背后发生了什么
2016/02/09 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
健康状况证明模板
2014/10/23 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
在人间读书笔记
2015/06/30 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
《烈火英雄》观后感:致敬和平时代的英雄
2019/11/11 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技