jQueryでファジークエリを実装する手順の詳細な説明

今回はjQueryでファジークエリを実装する手順について詳しく説明します jQueryでファジークエリを実装する際の注意事項を実際に見てみましょう。

要件: リストには多くのコンテンツが含まれており、ユーザーはリスト内のいくつかの項目を検索する必要があります。ユーザーの入力値に一致する項目のみが表示されます。 (バックグラウンドでのページングはなく、非同期インターフェースはデータ追加によって形成されたコンテンツリストを直接返します)

パラメータを渡して呼び出すことでクエリすることもできますが、ここでの主な記録は、front-インターフェイスを再度呼び出すことなく、あいまいクエリの処理を終了します。

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のファジークエリ機能が実現しました（笑）。コードの listen イベントに追加の入力があります。iOS と互換性があるとのことですが、テストしたことのある人がいたら教えてください。

もう一つの問題は、上記の実装方法では、リストの内容が数千以上になると、フォーム入力中にラグが発生することです。これは、多数の DOM 構造を js (非表示または表示) で操作する必要があるためです。 PC では状況はそれほど深刻ではありませんが、携帯電話でテストすると、本当に「スタック」してしまいました。もしマスターがより良い方法を持っているなら、それを改善することを願っています。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vueプロジェクトのパブリックフッターコンポーネントの下部位置適応手順の詳細な説明

Jsの古典的なケースコード分析

以上がjQueryでファジークエリを実装する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。