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 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
一个网马的tips实现分析
Nov 28 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
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生成月历代码
2007/06/14 PHP
ext 代码生成器
2009/08/07 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
python解析模块(ConfigParser)使用方法
2013/12/10 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
python正则-re的用法详解
2019/07/28 Python
python实现单链表的方法示例
2019/09/03 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
写好求职应聘自荐信的三部曲
2013/09/21 职场文书
试用期员工考核制度
2014/01/22 职场文书
秘书英文求职信
2014/04/16 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
教师节感谢信
2015/01/22 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书