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(){
        $('#bank_branch').focus(function(){
            showselet($(this).val())
        });
        $('#bank_branch').blur(function(){
            $('.enquiries-ul')[0].style.display = 'none';
        });
        $("#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);
                }
            }

        })
    }
    //    解析列表并渲染
    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); }) };
01-05 08:09
查看更多