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

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

1. HTMLの設定
2. jQueryでのリスト絞り込み処理
3. 実行結果
まとめ

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>