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 相关文章推荐
Jquery实现简单的动画效果代码
Mar 18 Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
JS性能优化实现方法及优点进行
Aug 30 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
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 HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
JavaScript中的property和attribute介绍
2011/12/26 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
2015/11/18 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
js实现表格筛选功能
2017/01/18 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
用Python一键搭建Http服务器的方法
2018/06/01 Python
Python异常处理例题整理
2019/07/07 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
台湾旅游网站:灿星旅游
2018/10/11 全球购物
学校后勤人员职责
2013/12/27 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
寄语是什么意思
2014/04/10 职场文书
旅游文化节策划方案
2014/06/06 职场文书
责任书格式范文
2014/07/28 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
《去年的树》教学反思
2016/02/18 职场文书
《刷子李》教学反思
2016/02/20 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python