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代码
Aug 18 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
浅谈react+es6+webpack的基础配置
Aug 09 Javascript
基于JSON数据格式详解
Aug 31 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
详解Node.js模板引擎Jade入门
Jan 19 Javascript
基于JS实现前端压缩上传图片的实例代码
May 14 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 Javascript
JS实现放大镜效果
Sep 21 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
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
wordpress之wp-settings.php
2007/08/17 PHP
iOS10推送通知开发教程
2016/09/19 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
Bootstrap警告(Alerts)的实现方法
2017/03/22 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
PyQt5 pyqt多线程操作入门
2018/05/05 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
Python assert关键字原理及实例解析
2019/12/13 Python
pytorch构建多模型实例
2020/01/15 Python
Python 爬虫性能相关总结
2020/08/03 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
什么是组件架构
2016/05/15 面试题
土建资料员岗位职责
2014/01/04 职场文书
初中政治教学反思
2014/01/17 职场文书
餐饮部总监岗位职责范文
2014/02/13 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python