Bootstrap框架下下拉框select搜索功能

更新时间：2020年03月26日 16:44:12 作者：花落莫相離

这篇文章主要为大家详细介绍了Bootstrap框架下下拉框select搜索功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

之前用Easyui框架下做的下拉框选择，虽然可以搜索，但是有诸多的不便：比如，不能模糊匹配，必须按照第一个字母来搜索

心血来潮，想换个框架写后台，然后用Bootstrap搭了个架子，然后两种样式冲突，百度了一把，找到了另一个牛逼的基于Bootstrap下拉框搜索功能的js

不区分大小写，模糊匹配，哈哈，太棒了~~

具体用法：

<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搜索功能汇总进行学习

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

分享8个JavaScript库可更好地处理本地存储
这篇文章主要介绍了分享8个JavaScript库可更好地处理本地存储,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-10-10
JavaScript 弹出窗体点击按钮返回选择数据的实现
这两天一直想实现这个，以前做做个Demo，但是不知道跑哪去了。于是今天在网上找了些资料再自己动手搞定。废话不多说。直接进入主题啦。
2010-04-04
json 带斜杠时如何解析的实现
这篇文章主要介绍了json 带斜杠时如何解析的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
layui 解决富文本框form表单提交为空的问题
今天小编就为大家分享一篇layui 解决富文本框form表单提交为空的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
转换json格式的日期为Javascript对象的函数
项目中碰到了用jQuery从后台获取的json格式的日期的字符串，需要将此字符串转换成JavaScript的日期对象，记在此处，以备后用。
2010-07-07
JavaScript中对象介绍
这篇文章主要介绍了JavaScript中对象介绍,本文直接用实例讲解对象的创建、删除等操作,并总结了Object属性、Property属性,需要的朋友可以参考下
2014-12-12
原生js实现自定义消息提示框
这篇文章主要为大家详细介绍了原生js实现自定义消息提示框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
使用JavaScript实现一个物理模拟
最近掌门人在写3D游戏,对于其中的物理效果很感兴趣,今天我将使用纯JavaScript来实现一个简易的物理模拟,其中包括碰撞检测与响应、摩擦力与空气阻力、以及物体的破坏效果,文中通过代码示例讲解的非常详细,需要的朋友可以参考下
2024-01-01
7个让JavaScript变得更好的注意事项
这篇文章主要介绍了7个让JavaScript变得更好的注意事项,十分详尽，需要的朋友可以参考下
2015-01-01
javascript将url中的参数加密解密代码
本文给大家分享一段给url参数加密解密的javascript代码，非常的好用，有需要的小伙伴直接拿走吧
2014-11-11