0
点赞
收藏
分享

微信扫一扫

JQuery设置下拉框变成可输入文本框

Ad大成 2022-02-16 阅读 160

引入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;
            }
        }
    });
})
举报

相关推荐

0 条评论