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异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 Javascript
JavaScript 绘制饼图的示例
Feb 19 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
laravel 框架配置404等异常页面
2019/01/07 PHP
Smarty模板配置实例简析
2019/07/20 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
python 自定义异常和异常捕捉的方法
2018/10/18 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
Python 控制终端输出文字的实例
2019/07/12 Python
python利用7z批量解压rar的实现
2019/08/07 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
python numpy中cumsum的用法详解
2019/10/17 Python
python实现简单图书管理系统
2019/11/22 Python
python读取mysql数据绘制条形图
2020/03/25 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
比利时买床:Beter Bed
2017/12/06 全球购物
打架检讨书50字
2014/01/11 职场文书
公司门卫岗位职责
2014/03/15 职场文书
土建施工员岗位职责
2014/07/16 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
Python实现的扫码工具居然这么好用!
2021/06/07 Python
JS 基本概念详细介绍
2021/10/16 Javascript