Bootstrap框架下下拉框select搜索功能


Posted in Javascript onMarch 26, 2020

之前用Easyui框架下做的下拉框选择,虽然可以搜索,但是有诸多的不便:比如,不能模糊匹配,必须按照第一个字母来搜索

Bootstrap框架下下拉框select搜索功能

心血来潮,想换个框架写后台,然后用Bootstrap搭了个架子,然后两种样式冲突,百度了一把,找到了另一个牛逼的基于Bootstrap下拉框搜索功能的js

Bootstrap框架下下拉框select搜索功能

不区分大小写,模糊匹配,哈哈,太棒了~~

Bootstrap框架下下拉框select搜索功能

具体用法:

<script type="text/javascript" src="<%=basePath%>/js/commons/jquery.min.js"></script>
<script type="text/javascript" src="${basePath}/js/silviomoreto-bootstrap/bootstrap-select.js"></script>
<link rel="stylesheet" type="text/css" href="${basePath}/js/silviomoreto-bootstrap/bootstrap-select.css">

<!-- 3.0 -->
<link href="${basePath}/js/silviomoreto-bootstrap/bootstrap.min.css" rel="stylesheet">
<script src="${basePath}/js/silviomoreto-bootstrap/bootstrap.min.js"></script>初始化一下:
 
$(window).on('load', function () {

 $('.selectpicker').selectpicker({
 'selectedText': 'cat'
 });

 // $('.selectpicker').selectpicker('hide');
});

关键代码是class和后面是否支持搜索

<select id="bs3Select" class="selectpicker show-tick form-control" multiple data-live-search="true">
 <option>cow</option>
 <option>bull</option>
 <option class="get-class" disabled>ox</option>
 
 </select>

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

更多搜索功能实现的精彩文章,请点击专题:javascript搜索功能汇总 进行学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门教程 Cookies
Jan 31 Javascript
jquery 框架使用教程 AJAX篇
Oct 11 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
Feb 22 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
Jul 10 #Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 #Javascript
jQuery回到顶部的代码
Jul 09 #Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 #Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 #Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 #Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 #Javascript
You might like
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
PHP框架性能测试报告
2016/05/08 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
在Django的session中使用User对象的方法
2015/07/23 Python
Python yield 使用方法浅析
2017/05/20 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
python+flask实现API的方法
2018/11/21 Python
python下载微信公众号相关文章
2019/02/26 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
单位承诺书格式
2014/05/21 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
2015年度企业工作总结
2015/05/21 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python
基于Redis位图实现用户签到功能
2021/05/08 Redis
Redis 哨兵集群的实现
2021/06/18 Redis
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python