jQuery實作模糊查詢實戰案例解析

這次帶給大家jQuery實作模糊查詢實戰案例解析，jQuery實作模糊查詢的注意事項有哪些，下面就是實戰案例，一起來看一下。

需求：list清單內容很多，使用者需要找出清單內容中的某些項目，只有當與使用者輸入值相符的條目才顯示出來。 （後台無分頁，直接非同步介面返回資料新增形成的內容清單）

#雖然可以透過傳參再呼叫查詢出來，但這裡主要記錄的是前端處理進行模糊查詢而無需再次呼叫介面的實作方法。

html部分：

<p class="search-form">
    <input type="text" placeholder="请输入关键词">
    <span class="icon-clear"></span>
</p>
<p class="content">
  <p class="title row no-gutter">
    <p class="col-20">列表一</p>
    <p class="col-20">列表二</p>
    <p class="col-20">列表三</p>
    <p class="col-20">列表四</p>
    <p class="col-20">列表五</p>
  </p>
  <p class="list-content">
    <ul>
      <li>
        <p class="code">00001</p>
        <p class="name">内容1</p>
        <p>内容2</p>
        <p>内容3</p>
        <p>内容4</p>
      </li>
      <li>……</li>
    </ul>
  </p>
</p>

js部分：

queryList: function(){
  $(".search-input").on("input propertychange", function() {
    var queryStr = $.trim($(".search-input").val());
    if(queryStr === ''){
      $(".list-content li").show();
    }else{
    // 以下是匹配某些列的内容，如果是匹配全部列的话就把find()和.parent()去掉即可
      $(".list-content li").hide().find(".code, .name").filter(":contains('"+queryStr+"')").parent("li").show();
      //$(".list-content").refresh(); //重新刷新列表把隐藏的dom结构去掉。
    }
  });
}

##分析：以上即實作了前端js的模糊查詢功能啦，哈哈。程式碼中監聽事件中多加了input，據說是為相容iOS的，具體沒測試，有哪位大神測試了可以告知一聲哈，謝謝了。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

React路由管理與React Router使用詳解

React如何在react-router路由實現登陸驗證控制

以上是jQuery實作模糊查詢實戰案例解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！