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所包裹的值