JavaScriptでフィルターリスト（検索絞り込み機能）を作成する方法

JavaScriptを使えば、検索ボックスに入力したキーワードに応じてリスト項目をリアルタイムに絞り込む「フィルターリスト」を簡単に実装できます。以下は、HTML・CSS・JavaScriptを組み合わせた基本的なサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    * {
        box-sizing: border-box;
    }
    .searchInput {
        width: 100%;
        font-size: 16px;
        padding: 12px 20px 12px 40px;
        border: 2px solid grey;
        margin-bottom: 12px;
    }
    .animalUL {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    .animalUL li a {
        border-top: 1px solid rgb(0, 0, 0);
        margin-top: -1px;
        background-color: #f6f6f6;
        padding: 12px;
        text-decoration: none;
        font-size: 18px;
        color: black;
        display: block;
    }
    .animalUL li a:hover:not(.header) {
        background-color: #eee;
    }
</style>
</head>
<body>
<h1>Filter list example</h1>
<input type="text" class="searchInput" onkeyup="filterFunction()" placeholder="Search for animals" title="Type in a name"/>
<ul class="animalUL">
<li><a href="#">Cat</a></li>
<li><a href="#">Cheetah</a></li>
<li><a href="#">Dog</a></li>
<li><a href="#">Giraffe</a></li>
<li><a href="#">Lion</a></li>
<li><a href="#">Leopard</a></li>
<li><a href="#">llama</a></li>
</ul>
<script>
    function filterFunction() {
        var input, filter, ul, li, a, i, value;
        input = document.querySelector(".searchInput");
        filter = input.value.toUpperCase();
        ul = document.querySelector(".animalUL");
        li = ul.getElementsByTagName("li");
        for (i = 0; i < li.length; i++) {
            a = li[i].getElementsByTagName("a")[0];
            value = a.textContent || a.innerText;
            if (value.toUpperCase().indexOf(filter) > -1) {
                li[i].style.display = "";
            } else {
                li[i].style.display = "none";
            }
        }
    }
</script>
</body>
</html>

コードの解説

onkeyupイベント： 検索ボックスでキーが離されるたびに filterFunction() が実行され、入力のたびにリストが即座に更新されます。
toUpperCase()による正規化： 入力値とリスト項目のテキストをどちらも大文字に変換してから比較するため、大文字・小文字を区別せずに検索できます。
表示・非表示の切り替え： 項目名に入力値が含まれていれば style.display を空にして表示し、含まれていなければ "none" に設定して非表示にします。

実行結果

上記のコードをブラウザで開くと、動物名の一覧と検索ボックスが次のように表示されます。

JavaScriptでフィルターリスト（検索絞り込み機能）を作成する方法

検索ボックスに文字を入力すると、入力内容に一致する項目だけがリアルタイムで表示されます。

JavaScriptでフィルターリスト（検索絞り込み機能）を作成する方法

まとめ

このように、数行のJavaScriptとシンプルなCSSだけで、検索機能付きのフィルターリストを実装できます。連絡先一覧や商品リストなど、多くの項目から目的の情報を素早く見つけたい場合に非常に便利です。さらに実用性を高めたい場合は、入力のたびに処理が走る負荷を抑えるdebounce（デバウンス）処理を加えたり、ヒット件数ゼロの場合のメッセージ表示を追加したりするのもおすすめです。

JavaScriptで指定した間隔ごとにマウスの位置をキャプチャする方法【サンプルコード解説】

【初心者向け】JavaScriptで空の入力フィールドのフォーム検証を追加する方法

CSSとJavaScriptでリスト表示とグリッド表示を切り替える方法【サンプルコード付き】
Webアプリケーションや管理画面などでは、コンテンツの表示形式を「リスト表示」と「グリッド表示」で切り替えられるUIがよく使われています。本記事では、CSSとJavaScript（バニラJS）だけを使って、ボタンクリックでリスト表示とグリッド表示を切り替える機能を実装する方法を解説します。実装のポイントこの機能は、以下の3つの要素で構成されています。カラムレイアウト：float を使って各カラムを横並びに配置します切り替えボタン：アクティブ状態のスタイルを持つボタンを配置しますJavaScript関数：カラムの幅（width）を変更し、ボタンの active クラスを付け替えますサンプルコード
Excel でフィルター付きのドロップダウンリストを作成する方法 (7 つの方法)
Microsoft Excel では、ドロップダウンリストフィルターを使用するとデータ入力が高速になります。フィルターを使用して、ワークシートのデータのセクションをフィルター処理して非表示にすることができます。この記事では、Excel ドロップダウンリストフィルターの作成方法を紹介します。ワークブックをダウンロードして練習できます。 Excel でフィルタを使用してドロップダウンリストを作成する 7 つの方法フィルタリングは、自分に関連する情報だけを絞り込んで表示できるという点で、グループ化とは異なります。 Excel ドロップダウンリストフィルターを作成する簡単な方法