Detailed explanation of the steps to implement fuzzy query with jQuery

This time I will bring you jQuery a detailed explanation of the steps to implement fuzzy query, and what are the precautions for jQuery to implement fuzzy query. The following is a practical case, let’s take a look.

Requirements: The list has a lot of content. The user needs to find some items in the list. Only the items that match the user input value are displayed. (There is no paging in the background, and the direct asynchronous interface returns the content list formed by data addition)

Although it can be queried by passing parameters and then calling, the main record here is the front-end processing for fuzzy query. There is no need to call the interface's implementation method again.

html part:

<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 part:

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结构去掉。
    }
  });
}

Analysis: The above is achieved The fuzzy query function of front-end js, haha. There is an additional input added to the listening event in the code. It is said to be compatible with iOS. I have not tested it specifically. If anyone has tested it, can you tell me? Thank you.

Another problem is that with the above implementation method, when the list contains thousands or more items, there will be lags during form input because a large number of DOM structures need to be manipulated through js ( Hide or show), the situation may not be that serious on the PC. When testing on the mobile phone, it is really "stuck". If any master has a better method, I hope to improve it!

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the bottom position adaptation steps of the public footer component in the vue project

Js classic case code analysis

The above is the detailed content of Detailed explanation of the steps to implement fuzzy query with jQuery. For more information, please follow other related articles on the PHP Chinese website!