bootstrap-select实现select标签具备搜索功能

项目开发中遇到select标签具备搜索功能的需求，找了挺多方法，最后用bootstrap-select实现的，很简单。

以下为实现方式，简单记录下。

1、引入相关js和css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/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="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.12/dist/js/bootstrap-select.min.js"></script>

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");
$('#contractnumber').selectpicker("render");

以上几步完成，就已经实现一个select标签的搜索功能了，搜索功能是bootstrap-select来实现的，无需频繁访问后台。

更多功能可以参见官网：https://developer.snapappointments.com/bootstrap-select/

小白一枚，欢迎指教~~