bootstrap-select实现select标签具备搜索功能
项⽬开发中遇到select标签具备搜索功能的需求，了挺多⽅法，最后⽤bootstrap-select实现的，很简单。
以下为实现⽅式，简单记录下。
1、引⼊相关js和css
<link rel="stylesheet" href="cdn.jsdelivr/npm/bootstrap-select@1.13.12/dist/css/bootstrap-select.min.css">
<!--⼀定要先引jquery-->
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui-1.10.4.min.js"></script>
<!-- 最后加载这个js，避免被Jquery覆盖掉部分内容 -->
<script src="cdn.jsdelivr/npm/bootstrap-select@1.13.12/dist/js/bootstrap-select.min.js"></scri
pt>
2、给要具备搜索功能的select设置class，data-live-search="true"设置搜索框显⽰与否。如果想实现多选功能就加个multiple属性<select class="selectpicker show-tick" data-live-search="true" id="contractnumber"></select>
3、select通过ajax动态加载完数据后，⼀定要刷新和渲染⼀下select，否则数据⽆法加⼊到select中
（因为bootstrap-select加载的select数据是在li⾥的，⽽不是option⾥）
//重新渲染（必须）
$('#contractnumber').selectpicker("refresh");
bootstrap项目$('#contractnumber').selectpicker("render");
以上⼏步完成，就已经实现⼀个select标签的搜索功能了，搜索功能是bootstrap-select来实现的，⽆需频繁访问后台。
⼩⽩⼀枚，欢迎指教~~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。