バニラJavaScriptを使用したページフィルター検索

単純なページの検索機能により、情報が豊富なページでユーザーエクスペリエンスを強化します。データベースクエリまたはJSONの解析を忘れてください。このメソッドは、Webページのレンダリングされたテキストコンテンツを直接検索します。ブラウザの組み込み検索が存在しますが、このアプローチは洗練されたフィルタリングエクスペリエンスを提供し、ナビゲーションを容易にするための関連する結果を強調します。

これが機能を紹介するライブデモです：[デモへのリンク]

この手法を実際のプロジェクトで利用しています： https：//www.php.cn/link/2a60eed05079970d61abad679da7ae8f 。

JavaScriptのレバレッジ

このチュートリアルでは、JavaScriptを使用して、すべてのインタラクティブな要素を管理しています。具体的には、次のようになります。

1. 検索可能なコンテンツを特定します。
2. 検索フィールドのユーザー入力を監視します。
3. 検索可能な要素のinnerTextをフィルタリングします。
4. テキストに検索用語が含まれているかどうかを確認します（ .includes()がここで重要です）。
5. 検索用語の一致に基づく要素の可視性を切り替えます。

基本的なHTML構造

各質問がタイトルとコンテンツを含む「カード」として提示されるFAQページを想定しましょう。

<h1 id="FAQセクション"> FAQセクション</h1>

<div>
  <h3 id="私たちは誰ですか">私たちは誰ですか</h3>
  <p>それは5世紀だけでなく、電子タイプセットへの飛躍も生き残っており、本質的に変化していません。それは普及しました</p>
</div>

<div>
  <h3 id="私たちがしていること">私たちがしていること</h3>
  <p>それは5世紀だけでなく、電子タイプセットへの飛躍も生き残っており、本質的に変化していません。それは普及しました</p>
</div>

<div>
  <h3 id="なぜここで働くのか">なぜここで働くのか</h3>
  <p>それは5世紀だけでなく、電子タイプセットへの飛躍も生き残っており、本質的に変化していません。それは普及しました</p>
</div>

<div>
  <h3 id="もっと詳しく知る">もっと詳しく知る</h3>
  <p>私たちについてもっと知りたいですか？</p>
</div>

多くの質問があるページの場合、この構造は効果的に拡大します。

対話性を有効にするために、単一のCSSルールを使用します。

 .is-hidden {display：none; }

このクラスは、要素の可視性を制御するために動的に追加または削除されます。また、検索入力を追加します。

<label for="searchbox">検索：</label>
<input type="text" id="searchbox">

コアJavaScript機能

次のJavaScriptコードが検索機能を管理します。

 function livesearch（）{
  let cards = document.queryselectorall（ '。カード'）; //カード要素を選択します
  let searchQuery = document.getElementById（ "searchbox"）。value; //検索用語を取得します

  cards.foreach（card => {
    textContent = card.innertext.tolowercase（）を; //小文字に正規化します
    let searchtermlower = searchquery.tolowercase（）; //小文字に正規化します

    if（textcontent.includes（searchtermlower））{
      card.classlist.remove（ 'is-hidden'）; //マッチングカードを表示します
    } それ以外 {
      card.classlist.add（ 'is-hidden'）; //一致しないカードを非表示にします
    }
  }）;
}

//過度の機能呼び出しを防ぐために小さな遅延を追加します
TypingTimerを使用します。
typeinterval = 500とします。 // 0.5秒
let searchInput = document.getElementById（ 'searchbox'）;

searchinput.addeventlistener（ 'keyup'、（）=> {
  cleartimeout（typingtimer）;
  typingtimer = setimeout（livesearch、typeinterval）;
}）;

コードは、カードを繰り返し、検索用語の包含（ケース非感受性）をチェックし、それに応じて可視性を更新します。遅延は、迅速なキーストロークのパフォーマンスの問題を防ぎます。

検索機能の拡大：ファジーマッチング

ファジーマッチング（明示的に表示されない場合でも、関連キーワードを検索する）を組み込むには、非表示の要素または属性の使用を検討してください。

方法1：隠された要素

キーワードを含む非表示の要素を追加します：

<div>
  <h3 id="私たちは誰ですか">私たちは誰ですか</h3>
  <p>...</p>
  <span class="hidden-keywords">秘密、会社、歴史</span>
</div>

innerTextの代わりにtextContentを含めるliveSearch変更して、非表示のキーワードにアクセスします。

方法2：属性

画像にaltのような属性を使用します。

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174227042512545.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="バニラJavaScriptを使用したページフィルター検索">

liveSearchを調整してgetAttribute('alt')を使用して属性値を検索します。

重要なメモ

この検索方法は、DOMですでにレンダリングされているコンテンツに限定されています。外部データベースや大規模なデータセットの検索には適していません。

結論

Vanilla JavaScriptで実装されたこのシンプルで効果的なページ内検索ソリューションは、広範なコンテンツを持つWebページの使いやすさを大幅に向上させることができます。 FAQページからイメージギャラリーまで、さまざまなアプリケーションに合わせてこの手法を適応して拡張します。

以上がバニラJavaScriptを使用したページフィルター検索の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。