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 相关文章推荐
JavaScript 对象模型 执行模型
Dec 06 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 Javascript
关于vue-router路径计算问题
May 10 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
vue中将网页打印成pdf实例代码
Jun 15 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
微信小程序 冒泡事件原理解析
Sep 27 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
用header 发送cookie的php代码
2007/03/16 PHP
php实现无限级分类实现代码(递归方法)
2011/01/01 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
TensorFlow实现RNN循环神经网络
2018/02/28 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
python 串行执行和并行执行实例
2020/04/30 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
老师推荐信
2013/10/28 职场文书
自我推荐书
2013/12/04 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
采购意向书范本
2014/03/31 职场文书
大学毕业寄语大全
2014/04/10 职场文书
幼儿教师师德师风演讲稿
2014/08/22 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
Python  lambda匿名函数和三元运算符
2022/04/19 Python
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers