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

近年、Webページにリアルタイムでフィルタリング機能を持つリストやテーブルを組み込むことが流行しています。この記事では、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);
        });
    });
});

まとめ

以上のコードを使用すると、ユーザーがテキストボックスに文字を入力するたびに、リスト内のアイテムがリアルタイムでフィルタリングされます。この方法は非常に基本的なものですが、さまざまなアプリケーションでカスタマイズや拡張が可能です。

リアルタイムのフィルタリングは、ユーザーエクスペリエンスを向上させる素晴らしい方法の1つです。この記事の内容を活用して、自分のサイトにこの機能を追加してみてください。