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 相关文章推荐
JQuery 风格的HTML文本转义
Jul 01 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
Dec 08 Javascript
js实现一键复制功能
Mar 16 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 Javascript
JS轮播图的实现方法
Aug 24 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
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
深入理解Python3中的http.client模块
2017/03/29 Python
Flask框架Flask-Principal基本用法实例分析
2018/07/23 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
Python semaphore evevt生产者消费者模型原理解析
2020/03/18 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
意大利男装网店:Vrients
2019/05/02 全球购物
运动会广播稿400字
2014/01/25 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
2015年财政所工作总结
2015/04/25 职场文书
遗失证明范文
2015/06/19 职场文书