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 相关文章推荐
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
JS判断非空至少输入两个字符的简单实现方法
Jun 23 Javascript
原生JS实现获取及修改CSS样式的方法
Sep 04 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 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
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
python实现自动发送报警监控邮件
2018/06/21 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
北京大学自荐信范文
2014/01/28 职场文书
业绩考核岗位职责
2014/02/01 职场文书
护士自我鉴定怎么写
2014/02/07 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
音乐教师求职信范文
2015/03/20 职场文书
企业财务管理制度范本
2015/08/04 职场文书
施工安全协议书
2016/03/22 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
导游词之山西-五老峰
2019/10/07 职场文书
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL
教你nginx跳转配置的四种方式
2022/07/07 Servers