基于bootstrap的autocomplete自动…
来源:互联网 发布:淘宝网上衣 编辑:程序博客网 时间:2024/06/10 14:00
基于bootstrap插件实现autocomplete自动完成表单,提供脚本代码,用例,以及后台服务端(php).
首先肯定还是加载bootstrap&jquery了.需要额外说明的是,后端返回的二维数组,和formatItem方法下面的调用保持一致即可;另外,返回的数据要先parseJSON!切记.
下面是自己采用yii2写的后台,这里面说明下只要保证返回结果是下面的格式就行,你可以替换成你所用的框架 [{"card_no":"123","mobile":"11"},{"card_no":"124","mobile":"22"}]
相关参数说明:
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
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
js代码,如下:
$('#card_no').autocomplete({ source:function(query,process){ var matchCount =this.options.items;//允许返回结果集最大数量 $.post("card/list",{"card_no":query,"matchCount":matchCount},function(respData){ respData =$.parseJSON(respData);//解析返回的数据 if(!respData) { alert('输入的卡号不正确'); } returnprocess(respData); }); }, formatItem:function(item){ returnitem["card_no"]+"(手机号:"+item["mobile"]+")"; }, setValue:function(item){ return{'data-value':item["card_no"],'real-value':item["mobile"]}; }});
php代码
Class CardController extend Controller { public function actionList() { // 获取ajax通过ajax传过来的card_no参数 $query = Yii::$app->request->post('card_no'); //这里CardList类对应的是数据库中card_list表,这里CardList类就不写出来 根据条件取出相关卡数据 $result = CardList:find()->select("card_no,mobile")->where(['like','card_no',$query]) ->asArray()->all(); //返回json数据 echo json_encode($result); exit; } }
效果图如下
0 1
- 基于bootstrap的autocomplete自动…
- bootstrap的插件 autocomplete
- 基于jquery的自动完成插件jquery.autocomplete.js
- 基于jquery的自动完成插件jquery.autocomplete.js
- 基于jQuery的autocomplete(自动补全)类
- jQuery的Autocomplete(自动完成、…
- jquery的自动完成Autocomplete
- bootstrap用 juqery Autocomplete组件实现搜索框自动提示
- 基于jquery的搜索自动填充功能jquery.autocomplete.min.js插件的引用
- 关于AutoComplete(文本框的自动填充)
- jQuery自动完成的插件(AutoComplete)
- Chrome的地址栏自动匹配完成(AutoComplete)
- Silverlight 的文本框自动完成(AutoComplete)
- jQuery的自动完成插件autocomplete
- ajax的自动完成标签(<ajax:autocomplete />)
- LiteIDE 的代码自动完成(AutoComplete)
- Jquery AutoComplete自动完成 的使用方法实例
- jquery的自动完成autocomplete插件用法
- 疯狂Android讲义-----第一章 Android应用的基本组件介绍
- 文本特征选择之互信息和卡方
- HTTP协议理解
- Search in Rotated Sorted Array解题报告
- Iconfont图标使用-打造自己项目下…
- 基于bootstrap的autocomplete自动…
- 各类API文档下载
- 文章标题
- Codevs 1997 守卫者的挑战
- mysql日期函数小记01
- iOS协议
- C#原生连接数据库并操作数据库的方法
- 计蒜客挑战难题:泥塑课
- WEB-INF 访问权限说明