CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

JavaScriptでリンクを絞り込む検索フィルターメニューの作成方法

JavaScriptを使えば、検索ボックスへの入力に応じてリンクリストをリアルタイムに絞り込む「フィルタリング検索メニュー」を簡単に実装できます。この記事では、入力したキーワードに一致する項目だけを表示する機能を、実際に動くサンプルコードとともにわかりやすく解説します。

実装の仕組み

今回のフィルタリング機能は、次の流れで動作します。

  1. テキストボックスでkeyupイベント(キーを離した瞬間)を検知する
  2. 入力値を取得し、toUpperCase()で大文字に統一して比較できるようにする
  3. リスト内のすべてのli要素を走査し、リンクのテキストに入力値が含まれるかをindexOf()で判定する
  4. 一致する項目は表示し、一致しない項目はdisplay: noneで非表示にする

サンプルコード

以下は、動物名のリンクを検索ボックスで絞り込む完全なHTMLコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
    font-family: monospace;
}
.outer {
    display: flex;
}
h2 {
    text-align: center;
}
.menu-left {
    flex: 35%;
    padding: 15px 0;
}
.menu-left h2 {
    padding-left: 8px;
}
.resultSide {
    flex: 55%;
    padding: 15px;
    background-color: rgb(199, 199, 255);
}
.resultSide p {
    font-size: 25px;
}
.searchBox {
    font-size: 16px;
    padding: 11px;
    border: 2px solid black;
}
/* 左カラムのナビゲーションメニューのスタイル */
.animalMenu {
    list-style-type: none;
    margin: 0px;
    background-color: lightgoldenrodyellow;
}
.animalMenu li a {
    padding: 12px;
    text-decoration: none;
    color: black;
    display: block;
}
li {
    font-size: 25px;
}
.animalMenu li a:hover {
    background-color: rgb(255, 112, 112);
}
</style>
</head>
<body>
<h2>動物を検索</h2>
<div class="outer">
<div class="menu-left">
<h2 style="background-color: lightgoldenrodyellow;">メニュー</h2>
<input type="text" maxlength="20" size="20" class="searchBox" placeholder="動物名を入力してください..." />
<ul class="animalMenu">
<li><a href="#">Lion(ライオン)</a></li>
<li><a href="#">Giraffe(キリン)</a></li>
<li><a href="#">Camel(ラクダ)</a></li>
<li><a href="#">Tiger(トラ)</a></li>
<li><a href="#">Cat(ネコ)</a></li>
</ul>
</div>
<div class="resultSide">
<h2>ページヘッダー</h2>
<p>サンプルコードの動作を確認するためのテキストです。</p>
<p>サンプルコードの動作を確認するためのテキストです。</p>
</div>
</div>
<script>
    let searchBox = document.querySelector(".searchBox");
    let filterSearch, ulItem, liItem, links;
    function processResults() {
        filterSearch = searchBox.value.toUpperCase();
        ulItem = document.querySelector(".animalMenu");
        liItem = ulItem.getElementsByTagName("li");
        Array.from(liItem).forEach(element => {
            links = element.getElementsByTagName("a")[0];
            if (links.innerHTML.toUpperCase().indexOf(filterSearch) > -1) {
                element.style.display = "";
            } else {
                element.style.display = "none";
            }
        });
    }
    searchBox.addEventListener("keyup", () => {
        processResults();
    });
</script>
</body>
</html>

コードの解説

processResults() 関数：検索ボックスに入力された値を toUpperCase() で大文字に変換することで、大文字・小文字を区別せずに比較できるようにしています。続いて querySelector() でul要素を取得し、その中のすべてのli要素を Array.from() で配列化して、forEach() ループで1つずつ処理します。

表示の切り替え：各li要素内の最初のaタグのテキストに検索文字列が含まれているかどうかを、indexOf() の戻り値で判定します。見つかった場合(戻り値が -1 より大きい)は display を空文字に戻して表示し、見つからない場合は none を設定して非表示にします。

イベントリスナー：検索ボックスに keyup イベントを登録することで、ユーザーが1文字入力するたびにフィルタリングが即座に実行されます。これにより、検索結果がリアルタイムに更新される快適な操作性を実現しています。

実装時の注意点

  • HTMLタグの記述ミス(例：liタグの閉じ忘れ)があると、要素が正しく取得できずフィルタリングが機能しません。マークアップは必ず検証しましょう。
  • 日本語のみを対象にする場合は大文字・小文字の統一は不要ですが、英字を含む可能性があるなら toUpperCase() を使う方法が有効です。
  • 入力のたびに全項目を判定するシンプルな方式のため、項目数が数百程度までであれば十分なパフォーマンスが得られます。

出力結果

このコードをブラウザで開くと、左側に検索ボックス付きの動物メニュー、右側にコンテンツエリアが表示されます。

JavaScriptでリンクを絞り込む検索フィルターメニューの作成方法

検索ボックスに文字を入力すると、一致しない項目が即座に非表示になり、該当するリンクだけが残ります。

JavaScriptでリンクを絞り込む検索フィルターメニューの作成方法


  1. CSSで検索ボタンを作成する方法｜サンプルコード付きで解説

    CSSを使えば、テキスト入力欄と検索アイコンボタンを組み合わせた、おしゃれで使いやすい検索フォームを簡単に作成できます。ここでは、Font Awesomeのアイコンを活用した検索ボタンの実装例を、実際のコードとともに紹介します。実装例（サンプルコード）以下は、CSSを使用して検索ボタンを作成するためのコード例です。<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1">

  2. CSSでアニメーション検索フォームを作成する方法

    CSSを使えば、クリックすると入力欄がスムーズに広がるアニメーション付きの検索フォームを簡単に作成できます。実装の鍵となるのは、transitionプロパティと:focus擬似クラスの組み合わせです。実装のポイントtransition： widthの変化に対して0.4秒のease-in-outイージングを指定し、滑らかなアニメーション効果を実現します。:focus： 検索ボックスがクリックされてフォーカスされたタイミングで、widthを100%に変更することでフォームが横方向へ拡張されます。コード例<!DOCTYPE html> <html> <head>