bootstrap-lect实现搜索，如果内容搜索不到显⽰到框内bootstrap-lect 实现搜索，如果内容搜索不到显⽰到框内
背景
最近的⼀个需求，⽤户需要点击之后出现下拉框，可以实现搜索功能，如果搜索到了，就选⽤这个值，如果搜索不到，则使⽤待搜索的词传到数据库中。
⽐如：
在搜索栏中搜索123123，由于下拉框内没有这个选项，所以会显⽰没有这个数据项：
最后就是需求要把123123选中到框内。实现这种：
实现：
源码是不会改，但是可以找根据id或者class进⾏更改；
<td>单位名称:</td>
<td colspan="3">
<lect id="caComName" name="caComName" class="lectpicker" title="请选择" data-live-arch="true">/lect>
</td>
需要引⼊的js：
<!--想要使⽤bootstrap-lect的话，依赖这个库，且位置必须在jquery上⾯-->
<script type="text/javascript" src="/js/asts/popper.min.js"></script>
<!--bootstrap-lect插件-->
<link rel="stylesheet" href="/css/plugins/bootstrap-lect/bootstrap-lect.min.css">
<script type="text/javascript" src="/js/plugins/bootstrap-lect/bootstrap-lect.min.js"></script>
<script type="text/javascript" src="/js/plugins/bootstrap-lect/defaults-zh_CN.min.js"></script>
实现js：
$("#caComName").lectpicker(); //初始化
$(window).on('load', function() {
$("#caComName").lectpicker('val', '');
$('#caComName').lectpicker('refresh');
});
//实现点击下拉框后才去服务器上加载数据，没啥可讲的。具体可以参考官⽹的事件。
$("#caComName").on('shown.bs.lect',function (){
// 下拉数据加载
$.ajax({
type : 'get',
亭溪岭古道
url : "/admin/innov/get/companyInfo",
dataType : 'json',
眼影怎么画初学者
success : function(data) {
let param = data[0];
var lect = $("#caComName");
for (var i = 0; i < data.length; i++) {
春分是哪一天
if(data[i] == param){
目鱼大烤的做法lect.append('<option value="'+data[i].companyId+'" >'+data[i].companyName+'</option>');
}el {
lect.append("<option value='"+ data[i].companyId +"'>"
+ data[i].companyName + "</option>");
}
}
$('#caComName').lectpicker('refresh');
$('#caComName').lectpicker('render');
}
});
})
//bootstrap-lect 给input加⼊onchange事件。仔细研究过bootstrap-lect的html之后，可以知道这块是啥意思。 //粗略说⼀下，⼤概的思路就是当input的内容改变之后触发事件，修改class为filter-option-inner-inner的值。
$("input[role='combobox']").change(function () {
//不能使⽤removeClass的⽅式来改变样式，应该是bootstrap-lect的⼀个bug。
//⾄于这块为啥要⽤$this，是因为如果出现了两个boostrap-lect的时候可以区分开。
let $this = $("#caComName")
$this.find(".bootstrap-lect").hidden
$this.find(".dropdown-menu").hidden
let input = $("input[role='combobox']").val()
汶川地震纪念日
// let input = $this.lect("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 = ElementsByClassName("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 = ElementsByClassName("filter-option-inner-inner");
let element = className.item(0);
let lfWriteCompanyName = element.innerHTML; //这个就是class为filter-option-inner-inner的div所包裹的值
