jq对数据实现模糊查找

1html部分

 <div class="fui-cell must ">
                    <div class="fui-cell-label">开户行分行</div>
                    <div class="fui-cell-info">
                        <input type="text" class="fui-input data-item enquiries-input" name="bank_branch" id="bank_branch" placeholder="请填开户行分行(在弹出的列表中选择)" value="{$reg['bank_branch']}"/>
                        <!-- 模糊查询-->
                    </div>
                </div>
                <ul class="enquiries-ul"></ul>

 

2.js部分

//模糊查询
    $(function(){
　　　　　　input框聚焦时显示选择列表
        $('#bank_branch').focus(function(){
            showselet($(this).val())
        });
　　　　　　input失去焦点时隐藏选择列表
        $('#bank_branch').blur(function(){
            $('.enquiries-ul')[0].style.display = 'none';
        });
　　　　//监听input的输入改变
        $("#bank_branch").on('input propertychange',function(){
            showselet($(this).val())
        });
    });
    //向后台请求数据
    function showselet(e){
        let cs = e
        let data = {}
        if($("#bank_code").isEmpty()){
            FoxUI.toast.show('请填写所属银行!');
            return
        }else {
            data.bank_code = $("#bank_code").val()
        };
        if($("#bank_province").isEmpty()){
            FoxUI.toast.show('请填写开户行省份!');
            return
        }else {
            data.bank_province = $("#bank_province").val()
        };
        if($("#bank_city").isEmpty()){
            FoxUI.toast.show('请填写开户行城市!');
            return
        }else {
            data.bank_city = $("#bank_city").val()
        };
        $.ajax({
            method:'POST',
            url:"你的请求地址",
            dataType: "json",
            data:data,
            success:function (e){
                if(e.status==1){
                    $('.enquiries-ul')[0].style.display = 'block';
                    renderingzh(e.result.data,cs);
                }else {
                    FoxUI.toast.show(e.result.message);
                }
            }

        })
    }
    //    解析列表并渲染：前端js模板渲染方式
    function renderingzh(dataList,cs) {
        var html = dataList;
        let arrayLists = '';
        for (let item=0;item<html.length;item++){
            // console.log(html[item])
             arrayLists +=
                `
                <li class="enquiries-li">${html[item].bank_branch}</li>

                `
        };
        $(".enquiries-ul")[0].innerHTML = arrayLists;
        //过滤数据并显示，根据搜索框的数据进行模糊匹配，将匹配上的显示出来，匹配不上的隐藏掉
　　　　方式一：

        /*$(".enquiries-ul li").hide();
        $(".enquiries-ul li").filter(":contains('" + cs + "')").show();*/
　　　　方式二：

        $(".enquiries-ul li")
            .hide()
            .filter(":contains('" + (cs) + "')")
            .show();
        $(".enquiries-li").click(function () {
            var val = $(this).text();
            $(".enquiries-input").val(val);
        })
    };