jQuery implementation of fuzzy query practical case analysis

This time I will bring you jQueryA practical case analysis of implementing fuzzy query. What are the precautions for jQuery to implement fuzzy query? Here are the practical cases, 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.

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 React routing management and use of React Router

How to implement login in react-router routing with React Verification Control

The above is the detailed content of jQuery implementation of fuzzy query practical case analysis. For more information, please follow other related articles on the PHP Chinese website!