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 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
javascript 写类方式之一
Jul 05 Javascript
Ruffy javascript 学习笔记
Nov 30 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
javascript里使用php代码实例
Dec 13 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
JS中Attr的用法详解
Oct 09 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
CocosCreator入门教程之网络通信
Apr 16 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实现定时生成HTML网站首页实例代码
2008/11/20 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
基于canvas实现手写签名(vue)
2020/05/21 Javascript
Python中的Matplotlib模块入门教程
2015/04/15 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
python gdal安装与简单使用
2019/08/01 Python
python实现简易淘宝购物
2019/11/22 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
CSS3实现红包抖动效果
2020/12/23 HTML / CSS
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
介绍一下JNDI的基本概念
2013/07/26 面试题
教师自荐信
2013/12/10 职场文书
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
毕业设计说明书
2014/05/07 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
redis lua限流算法实现示例
2022/07/15 Redis