BootStrap 智能表单实战系列(十)自动完成组件的支持


Posted in Javascript onJune 13, 2016

web开发中,肯定遇到像百度、google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓:

1、包含像google、百度等类似的简单搜索

2、复杂结构的支持,比如说 输入产品编号,需要将产品的编号、产品的名称、产品的单价、产品的备注信息等填写会表单中的某个位置

代码如下(页面地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form3-ele-autocomplete.html):

自动完成

note:需要引入js文件:jquery-ui.js、jquery.fn.extend.js

在表单生成完成后,通过指定元素调用SmartSearch方法

参数说明:

url:请求的url

beforeSearch:可选,在发送请求之前调用的方法,改方法有一个参数data包含要发送的数据,如果需要添加或者修改要发送的参数,修改次参数即可

formatItem:可选,如果返回的不是简单的数组字符串,则必自定义操作,用于格式化界面显示的内容,例中显示的是产品编号 + 产品名称

callback:可选,如果返回的不是简单的数组字符串,则必自定义操作,用于赋值
note:如果接口返回的是简单的字符串数组,则 formatItem和callback皆可省略

这是我本地测试项目中运行的截图:

BootStrap 智能表单实战系列(十)自动完成组件的支持

以上所述是小编给大家介绍的BootStrap 智能表单实战系列(十)自动完成组件的支持的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 触发事件列表 比较不错
Sep 03 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
JS中常用的消息框总结
Feb 24 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 #Javascript
浅谈JavaScript对象的创建方式
Jun 13 #Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 #Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 #Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 #Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 #Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 #Javascript
You might like
php有道翻译api调用方法实例
2014/12/22 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
PHP实现添加购物车功能
2017/03/06 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
url 特殊字符 传递参数解决方法
2010/01/01 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
2015/10/26 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
python 提取文件指定列的方法示例
2019/08/07 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
HTML文本属性&颜色控制属性的实现
2019/12/17 HTML / CSS
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
新闻记者实习自我鉴定
2013/09/19 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
经济国贸专业求职信
2014/06/18 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
赞助商致辞
2015/07/30 职场文书