bootstrap结合chosen组件实现select可搜索功能

1、下载chosen相关css和js文件，版本1.8.7。可直接在我得csdn资源中下载：https://download.csdn.net/download/Peacock__/12229668

也可在此链接选择想要的版本进行下载：https://github.com/harvesthq/chosen/releases/

chosen中文文档参考：https://github.com/amazeui/chosen/blob/master/docs/options.md

2、页面中引入

<link href="${ctxPath}/static/css/plugins/chosen/chosen1.8.7.css" rel="stylesheet">
<script src="${ctxPath}/static/js/plugins/chosen/chosen1.8.7.jquery.js"></script>

3、为select绑定class form-control-chosen

<select class="form-control form-control-chosen" id="con_product" name="con_product">
   <option value="">请选择</option>
   <option value="1">产品1</option>
   <option value="2">产品2</option>
</select>

4、初始化chosen，更多属性参考：https://github.com/amazeui/chosen/blob/master/docs/options.md

 //下拉框可搜索初始加载
        $('.form-control-chosen').chosen({
            no_results_text: "没有找到结果！",//搜索无结果时显示的提示
            search_contains:true, //关键字模糊搜索。设置为true，只要选项包含搜索词就会显示；设置为false，则要求从选项开头开始匹配
            allow_single_deselect:true, //单选下拉框是否允许取消选择。如果允许，选中选项会有一个x号可以删除选项
            // hide_results_on_select: false //默认情况下，选定的结果在选定某个选项后隐藏。将此选项设置为false将在选择后保持结果打开。这只适用于多个选择。
        });

实现效果可参考：https://harvesthq.github.io/chosen/