引入jquery-editable-select.css 跟jquery-editable-select.js
//下拉框
<select id="editSelect" class="editSelectform-control"></select>
//加载下拉框狂
$(function () {
$.ajax({
type: "POST",
contentType: "application/json",
url: "../../api/Controllers/GetList",
dataType: "json",
data: {},
success: function (data) {
var dataList = data;
console.log(dataList);
let html = "";
for (let i = 0; i < dataList.Table.length; i++) {
//html += '<option>' + dataList.Table[i]["Name"] + '</option>';
html += "<option class='CkClick' value='" + dataList.Table[i]["Id"] + "'>" + dataList.Table[i]["Name"] + '</option>';
}
//把数据追加到下拉框中
$("#editSelect").html(html);
$('#editSelect').editableSelect();
$("#editSelect").bind("input propertychange", function (event) {
let searchList = fuzzyQuery(dataList.Table, $("#editSelect").val())
let html = '';
for (let i in searchList) {
html += '<li class="es-visible">' + searchList[i] + '</li>';
}
$('#editSelect').parent().find("ul").html(html).show();
});
//下拉框li的点击事件
$(".es-list").bind("click", function (event) {
});
function fuzzyQuery(list, keyWord) {
var arr = [];
for (var i = 0; i < list.length; i++) {
if (list[i].indexOf(keyWord) >= 0) {
arr.push(list[i]);
}
}
return arr;
}
}
});
})