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的，具體沒測試，有哪位大神測試了可以告知一聲哈，謝謝了。

還有個問題就是，以上實作方法，當列表內容多大幾千條數目或更多時，表單輸入時會出現卡頓的情況，因為要透過js操作大量的DOM結構啊（隱藏或顯示），PC上或許情況還沒有那麼嚴重，在手機上測試時那真的是“怎一個卡字了得”，如果哪位大神有更好的法子，還望加以完善！

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

推薦閱讀：

vue專案中公用footer元件底部位置適配步驟詳解

Js經典案例程式碼解析#

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