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 相关文章推荐
js 可拖动列表实现代码
Dec 13 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
vue-ajax小封装实例
Sep 18 Javascript
微信公众平台获取access_token的方法步骤
Mar 29 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 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 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
js操作select控件的几种方法
2010/06/02 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
轮播的简单实现方法
2016/07/28 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
2017/07/22 jQuery
JS实现前端缓存的方法
2017/09/21 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
JS正则表达式封装与使用操作示例
2019/05/15 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
浅谈python中的变量默认是什么类型
2016/09/11 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
Python语言的变量认识及操作方法
2018/02/11 Python
python中append实例用法总结
2019/07/30 Python
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
澳大利亚玩具剧场:Toy Playhouse
2019/03/03 全球购物
产品售后服务承诺书
2014/05/21 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
2015年工商所工作总结
2015/05/21 职场文书
APP界面设计技巧和注意事项
2022/04/29 杂记