zoukankan      html  css  js  c++  java
  • 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); }) };
  • 相关阅读:
    poj 1014||hdu 1059 dividing(多重背包 二进制优化)
    Java多线程循环打印ABC的5种实现方法
    java资料搜索网站
    idea 离线安装 lombok插件
    解决TIME_WAIT过多造成的问题
    JAVA线程池详解
    linux vmstat命令
    Mysql慢查询
    sql中强制使用索引
    JAVA 利用 jmc或jvisualvm 监控 本地或者远程JVM
  • 原文地址:https://www.cnblogs.com/Dark-fire-liehuo/p/11736939.html
Copyright © 2011-2022 走看看