ホームページ > 記事 > ウェブフロントエンド > ファジークエリの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 と互換性があるとのことですが、テストしたことのある人がいたら教えてください。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
React ルーティング管理と React Router の使用の詳細な説明
React がどのように React-router ルーティングでログイン検証制御を実装するか
以上がファジークエリのjQuery実装実践事例分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。