【jQuery】フィルター機能を実装する方法

近年、Webページにリアルタイムでフィルタリング機能を持つリストやテーブルを組み込むことが流行しています。この記事では、jQueryを使用してこのフィルタリング機能を簡単に実装する方法をご紹介します。

必要なHTML構造のセットアップ
jQueryでのフィルタリング機能の実装
まとめ

必要なHTML構造のセットアップ

まず、フィルタリングするリストと、ユーザーが検索キーワードを入力するテキストボックスを用意します。

<input type="text" id="filter-input" placeholder="キーワードを入力">
<ul id="item-list">
    <li>アイテム1</li>
    <li>アイテム2</li>
    <li>アイテム3</li>
    <li>特別なアイテム</li>
    <li>別のアイテム</li>
</ul>

jQueryでのフィルタリング機能の実装

次に、jQueryを使用してフィルタリングの実際の処理を書きます。テキストボックスにキーワードが入力されるたびにリストを更新するようにします。

$(document).ready(function(){
    $('#filter-input').on('keyup', function(){
        var value = $(this).val().toLowerCase();
        $('#item-list li').filter(function(){
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
        });
    });
});