bootstrap框架下的selectpicker搜索實現根據搜索內容去後臺實時查詢

想要實現下拉框的搜索功能，輸入搜索項後去後臺查詢，而後將查詢的列表返回到下拉框中，再也不是以往那種先獲取全部可選項，而後前端根據輸入的搜索內容顯示可選項

 

// 下拉搜索框
<select name="gid" id="gid" class="selectpicker form-control" data-live-search="true">
<option value="">請選擇公司</option>
</select>
//下面是js
<script>
$("#gid").on('shown.bs.select',function(e){
//獲取下拉select裏的輸入框,提示一下搜索下拉
$(this).prev().find("input").attr('placeholder',"請輸入公司名稱搜索");
//綁定一下鍵盤輸入
$(this).prev().find("input").keyup(function(){
//爲select裏的輸入框綁定id,方便獲取
$(this).prev().find("input").attr('id',"dangname");
var dangname = $(this).val();
var datas = {
'gname':dangname
};
setTimeout(function () {//延時2秒
guestlist('#gid',datas);
},2000);
})
});
function guestlist(obj,datas){
$(obj).empty();
$.ajax({
type: "post",
url:'',//查詢url
data:datas,
async:false,
dataType: "json",
success: function(data){
if (data !='') {
var html = '';
$.each(data,function (index,ele) {
html += '<option value="' + ele.id + '">' + ele.unitname+ '</option>';
});
$(obj).html(html);
}else {
$(obj).html('<option value="">請選擇客戶</option>');
}
//刷新select
$(obj).selectpicker('refresh');
}
});
}
</script>
---------------------
做者：旮不旮旯不旯
來源：CSDN
原文：https://blog.csdn.net/wg526125649/article/details/84622527
版權聲明：本文爲博主原創文章，轉載請附上博文連接！

原文出處：https://www.cnblogs.com/hardwork1/p/bootstrap-selectpicker.html