【jQuery】ウェブページ上のリスト表示を動的に絞り込む方法

jQueryを使用して、ウェブページ上のリスト表示を動的に絞り込む方法を紹介します。この方法を使用すると、ユーザーが入力したテキストに基づいてリストをフィルタリングし、目的の項目を素早く見つけることができます。

1. HTMLの設定

まず、HTMLにテキスト入力フィールドとリストを追加します。

<input type="text" id="searchInput" placeholder="検索...">
<ul id="list">
  <li class="list-item">りんご</li>
  <li class="list-item">バナナ</li>
  <li class="list-item">チェリー</li>
  <li class="list-item">デート</li>
  <li class="list-item">エルダーベリー</li>
  <li class="list-item">いちじく</li>
  <li class="list-item">ぶどう</li>
  <li class="list-item">キウイ</li>
</ul>

2. jQueryでのリスト絞り込み処理

次に、jQueryを使用してテキスト入力フィールドの入力に応じてリストを絞り込む処理を実装します。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $('#searchInput').on('keyup', function(){
    var searchText = $(this).val().toLowerCase();
    $('#list .list-item').each(function(){
      var text = $(this).text().toLowerCase();
      if(text.indexOf(searchText) !== -1){
        $(this).show();
      } else {
        $(this).hide();
      }
    });
  });
});
</script>

3. 実行結果

これで、テキスト入力フィールドに入力されたテキストに基づいてリストが絞り込まれるようになりました。ユーザーが入力するたびにリストが更新され、目的の項目を素早く見つけることができます。

まとめ

jQueryを使用してウェブページ上のリスト表示を絞り込む方法を紹介しました。この手法を使用すると、ユーザーが入力したテキストに基づいてリストを動的にフィルタリングすることができ、ユーザーエクスペリエンスを向上させることができます。