バニラJavaScriptを使用したページフィルター検索-CSSチュートリアル-php.cn

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

William Shakespeare

リリース： 2025-03-18 12:00:22

オリジナル

553 人が閲覧しました

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

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

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

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

JavaScriptのレバレッジ

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

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

基本的なHTML構造

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

<h1> FAQセクション</h1>

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

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

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

<div>
  <h3>もっと詳しく知る</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>私たちは誰ですか</h3>
  <p>...</p>
  <span class="hidden-keywords">秘密、会社、歴史</span>
</div>

ログイン後にコピー

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

方法2：属性

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

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

ログイン後にコピー

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