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 相关文章推荐
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
ejs v9 javascript模板系统
Mar 21 Javascript
jquery foreach使用示例
Sep 12 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 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
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
php实现将Session写入数据库
2015/07/26 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
js取float型小数点后两位数的方法
2014/01/18 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
[36:19]2018DOTA2亚洲邀请赛 小组赛 A组加赛 Newbee vs LGD
2018/04/03 DOTA
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
Python3内置模块random随机方法小结
2019/07/13 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
python的re模块使用方法详解
2019/07/26 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
EJB的角色和三个对象
2015/12/31 面试题
公司活动方案范文
2014/03/06 职场文书
迎新晚会策划方案
2014/06/13 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
卖车协议书范例
2014/09/16 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
Python基础之数据结构详解
2021/04/28 Python
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python