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所包裹的值
博客网站 https://yamon.top
个人网站 https://yamon.top/resume
GitHub网站 https://github.com/yamonc
欢迎前来访问