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 相关文章推荐
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 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
PHP中FTP相关函数小结
2016/07/15 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
js下弹出窗口的变通
2007/04/18 Javascript
Javascript的一种模块模式
2008/03/22 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
python实现神经网络感知器算法
2017/12/20 Python
实现Python与STM32通信方式
2019/12/18 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
《我要的是葫芦》教学反思
2014/02/23 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
人才市场接收函
2015/01/30 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
材料员岗位职责范本
2015/04/11 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers