bootstrap-select 实现搜索，如果内容搜索不到显示到框内

bootstrap-select 实现搜索，如果内容搜索不到显示到框内

背景

最近的一个需求，用户需要点击之后出现下拉框，可以实现搜索功能，如果搜索到了，就选用这个值，如果搜索不到，则使用待搜索的词传到数据库中。

比如：

在搜索栏中搜索123123，由于下拉框内没有这个选项，所以会显示没有这个数据项：

最后就是需求要把123123选中到框内。实现这种：

实现：

源码是不会改，但是可以找根据id或者class进行更改；

<td>单位名称:</td>
<td colspan="3">
  	<select id="caseComName" name="caseComName" class="selectpicker" title="请选择" data-live-search="true">/select>
</td>

需要引入的js：

<!--想要使用bootstrap-select的话，依赖这个库，且位置必须在jquery上面-->
<script type="text/javascript" src="/js/assets/popper.min.js"></script>
 <!--bootstrap-select插件-->
    <link rel="stylesheet" href="/css/plugins/bootstrap-select/bootstrap-select.min.css">
    <script type="text/javascript" src="/js/plugins/bootstrap-select/bootstrap-select.min.js"></script>
    <script type="text/javascript" src="/js/plugins/bootstrap-select/defaults-zh_CN.min.js"></script>

实现js：

$("#caseComName").selectpicker(); //初始化
$(window).on('load', function() {
    $("#caseComName").selectpicker('val', '');
    $('#caseComName').selectpicker('refresh');
});
//实现点击下拉框后才去服务器上加载数据，没啥可讲的。具体可以参考官网的事件。
$("#caseComName").on('shown.bs.select',function (){
        // 下拉数据加载
        $.ajax({
            type : 'get',
            url : "/admin/innov/get/companyInfo",
            dataType : 'json',
            success : function(data) {
                let param = data[0];
                var select = $("#caseComName");
                for (var i = 0; i < data.length; i++) {
                    if(data[i] == param){
                        select.append('<option value="'+data[i].companyId+'" >'+data[i].companyName+'</option>');
                    }else {
                        select.append("<option value='"+ data[i].companyId +"'>"
                            + data[i].companyName + "</option>");
                    }
                }
                $('#caseComName').selectpicker('refresh');
                $('#caseComName').selectpicker('render');
            }
        });
    })
	//bootstrap-select 给input加入onchange事件。仔细研究过bootstrap-select的html之后，可以知道这块是啥意思。
	//粗略说一下，大概的思路就是当input的内容改变之后触发事件，修改class为filter-option-inner-inner的值。
    $("input[role='combobox']").change(function () {
        //不能使用removeClass的方式来改变样式，应该是bootstrap-select的一个bug。
        //至于这块为啥要用$this，是因为如果出现了两个boostrap-select的时候可以区分开。
        let $this = $("#caseComName")
        $this.find(".bootstrap-select").hidden
        $this.find(".dropdown-menu").hidden
        let input = $("input[role='combobox']").val()
        // let input = $this.select("input[role='combobox']")
        // let input = $this.find("input[role='combobox']").val();
        console.log(input)
        // $this.find(".filter-option-inner-inner").attr('id','comDiv')
        // $("#comDiv").val(input)
        //这块我也不想用js，但是jq不能用啊，只能采用js的方法写了。
        let className = document.getElementsByClassName("filter-option-inner-inner");
        let element = className.item(0);
        element.innerHTML=input;
        // $this.find(".filter-option-inner-inner").text(input);
        console.log($this.find(".filter-option-inner-inner"))
    })

大概只有这些，如果想传数据到后台的话，可以这样写：

let className = document.getElementsByClassName("filter-option-inner-inner");
let element = className.item(0);
let selfWriteCompanyName = element.innerHTML;   //这个就是class为filter-option-inner-inner的div所包裹的值