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 相关文章推荐
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
javascript判断机器是否联网的2种方法
Aug 09 Javascript
javascript相等运算符与等同运算符详细介绍
Nov 09 Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 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
SONY ICF-SW55的电路分析
2021/03/02 无线电
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
PHP时间和日期函数详解
2015/05/08 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
javascript编写简易计算器
2017/05/06 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
python 函数内部修改外部变量的方法
2018/12/18 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
简单了解python列表和元组的区别
2020/05/14 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
护理自荐信范文
2013/10/05 职场文书
团购业务员岗位职责
2014/03/15 职场文书
企业法人授权委托书
2014/04/03 职场文书
数学系毕业生求职信
2014/05/29 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
购房协议书范本
2014/10/02 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
Redis主从复制操作和配置详情
2022/09/23 Redis