jQuery借鉴layui实现可搜索下拉列表(有值才显示筛选出的列表)

需求：表单中的下拉列表不能直接显示所有的选项，只有通过输入要筛选的值，才能显示匹配的选项。也就是不能让用户看到所有的选项。

因为使用的是jQuery和layui，用layui的lay-search会显示所有选项，所以最后决定自己写。

1、首先是body中的内容，使用layui的表单中的输入框和下拉列表

<div class="layui-form-item">
    <label class="layui-form-label">下拉框</label>
    <div class="layui-input-block">
        <input type="text" name="select_text" id='select_text'  placeholder="请输入搜索内容" autocomplete="off" class="layui-input">
        <div class="layui-unselect layui-form-select">
            <dl class="layui-anim layui-anim-upbit" id="inputSelect" style="top: 0px;">
                <dd mark="tips" name="dd" id="tips" onclick="ddClick(this)" class="layui-select-tips">请输入</dd>
            </dl>
        </div>
    </div>
</div>

2、script中先动态获取下拉列表，处理数据

let selects = `<dd mark="tips" name="dd" id="tips" class="layui-select-tips"  onclick="ddClick(this)" value="">请输入合作伙伴</dd>`;
res.data.map(item => {
    selects += `<dd mark="value" name="dd" onclick="ddClick(this)" class="" value="${item.id}">${item.text}</dd>`;
})
selects += `<p class="layui-select-none" style="display:none;">无匹配项</p>`;
$('#inputSelect').html(selects);
$('#inputSelect dd').hide();
$('#tips').show();

3、处理事件

var select_id = "";
function ddShow(){
    var selectVal = $('#selet_text').val();
    var dds = $('#inputSelect dd');
    if (selectVal) {/* 输入框有值 */
        let arr = [];
        for (var i = 0; i < dds.length; i++) {
            if (dds[i].getAttribute('id')!=='tips' && dds[i].innerHTML.indexOf(selectVal) > -1) {/* 列表中匹配上输入框的值 */
                dds[i].style.display = "block";
                arr.push(true);
                if(select_id && dds[i].getAttribute('value')===select_id){
                    dds[i].className = "layui-this";
                }else{
                    dds[i].className = '';
                }
            } else {
                dds[i].style.display = "none";
                arr.push(false);
            }
        }
        $('#tips').hide();
        if (arr.every(i => !i)) {/* 列表没有一条匹配上输入框的值，就显示无匹配值 */
            $('#inputSelect p').show();
        } else {
            $('#inputSelect p').hide();
        }
    } else {
        $('#inputSelect dd').hide();
        $('#tips').show();
        $('#inputSelect p').hide();
    }
}
/* 输入框 输入事件 */
$(document).on('input', '#select_text', function(){
    ddShow();
    select_id = '';/* 每次输入都置空id */
});
/* 输入框 点击事件 */
$(document).on('click', '#select_text', function () {
    if ($("#inputSelect").css('display') == 'block') {
        $("#inputSelect").hide();
        $(this).blur();
        if(!select_id){
            $('#select_text').val('');
        }
    } else {
        $("#inputSelect").fadeIn("slow");
        $(this).focus();
        ddShow();
    }
});
/* 点击其它地方关闭列表 */
$('body').click(function (e) {
    if ($(e.target).parent().attr('id') != 'inputSelect' && $(e.target).attr('id') != 'select_text') {
        $("#inputSelect").hide();
        if (!select_id) {
            $('#select_text').val('');
        }
    }
});
/* 列表中的一条 点击事件 */
function ddClick(dd) {
    $("#inputSelect").hide();
    var mark = dd.getAttribute("mark");
    var dds = $('#inputSelect dd');
    for (var i = 0; i < dds.length; i++) {
        if (dd !== dds[i]) {
            dds[i].className = "";
        }
    }
    document.getElementById("tips").className = "layui-select-tips";
    if ("tips" === mark) {
        $('#select_text').val('');
        select_id = '';
        dd.className = "layui-select-tips";
    } else if ("value" === mark) {
        $('#select_text').val(dd.innerHTML);
        select_id = dd.getAttribute('value');
        dd.className = "layui-this";
    }
}

弄完这个就花费了一天多，各种情况都要考虑到，头大！