【jQuery】リスト・テーブルをリアルタイムで絞り込む完全ガイド｜テキスト検索・カテゴリフィルター・件数表示・ソートまで

フリーワード検索やカテゴリボタンでページをリロードせずにリストやテーブルを絞り込む機能は、ユーザーが大量のコンテンツを素早く見つけるための定番UIです。この記事では基本的なテキスト絞り込みから、カテゴリフィルター・件数表示・ソート・複数条件の組み合わせまで実用的なパターンを体系的に解説します。

基本: テキスト入力でリストを絞り込む

入力したテキストに部分一致するリストアイテムのみを表示し、一致しないものを非表示にします。

HTML

<input type="text" id="search-input" placeholder="絞り込み...">
<p>ヒット: <span id="hit-count">8</span> 件</p>

<ul id="item-list">
  <li class="list-item">HTML / CSS</li>
  <li class="list-item">JavaScript</li>
  <li class="list-item">jQuery</li>
  <li class="list-item">TypeScript</li>
  <li class="list-item">React</li>
  <li class="list-item">Vue.js</li>
  <li class="list-item">Node.js</li>
  <li class="list-item">Python</li>
</ul>
<p id="no-result" style="display:none">該当する項目が見つかりません。</p>

JavaScript

$(function () {
  $('#search-input').on('input', function () {
    var keyword = $(this).val().toLowerCase();
    var count   = 0;

    $('.list-item').each(function () {
      var matches = $(this).text().toLowerCase().includes(keyword);
      $(this).toggle(matches);
      if (matches) count++;
    });

    $('#hit-count').text(count);
    $('#no-result').toggle(count === 0);
  });
});

テーブル行の絞り込み

テーブルの場合は <tr> をまとめて show/hide します。ヘッダー行（thead）は常に表示したままにします。

<input type="text" id="table-search" placeholder="絞り込み...">

<table id="data-table">
  <thead>
    <tr><th>名前</th><th>カテゴリ</th><th>言語</th></tr>
  </thead>
  <tbody>
    <tr><td>React</td><td>フレームワーク</td><td>JavaScript</td></tr>
    <tr><td>Vue.js</td><td>フレームワーク</td><td>JavaScript</td></tr>
    <tr><td>Django</td><td>フレームワーク</td><td>Python</td></tr>
    <tr><td>Laravel</td><td>フレームワーク</td><td>PHP</td></tr>
  </tbody>
</table>

$(function () {
  $('#table-search').on('input', function () {
    var keyword = $(this).val().toLowerCase();

    // tbody の tr のみを対象（thead はスキップ）
    $('#data-table tbody tr').each(function () {
      var rowText = $(this).text().toLowerCase();
      $(this).toggle(rowText.includes(keyword));
    });
  });
});

カテゴリボタンによるフィルタリング

data属性でカテゴリを管理し、ボタンでフィルタリングするパターンはポートフォリオや記事一覧でよく使われます。

HTML

<div class="filter-buttons">
  <button class="filter-btn is-active" data-filter="all">すべて</button>
  <button class="filter-btn" data-filter="frontend">フロントエンド</button>
  <button class="filter-btn" data-filter="backend">バックエンド</button>
  <button class="filter-btn" data-filter="db">データベース</button>
</div>

<ul id="portfolio-list">
  <li class="card-item" data-category="frontend">HTML / CSS</li>
  <li class="card-item" data-category="frontend">JavaScript</li>
  <li class="card-item" data-category="frontend">React</li>
  <li class="card-item" data-category="backend">PHP</li>
  <li class="card-item" data-category="backend">Python</li>
  <li class="card-item" data-category="db">MySQL</li>
  <li class="card-item" data-category="db">PostgreSQL</li>
</ul>

JavaScript

$(function () {
  $('.filter-btn').on('click', function () {
    var filter = $(this).data('filter');

    // ボタンのアクティブ状態を更新
    $('.filter-btn').removeClass('is-active');
    $(this).addClass('is-active');

    // カードの表示・非表示
    if (filter === 'all') {
      $('.card-item').show();
    } else {
      $('.card-item').each(function () {
        var matches = $(this).data('category') === filter;
        $(this).toggle(matches);
      });
    }
  });
});

.filter-btn {
  padding: 6px 14px;
  border: 1px solid #d1d5db;
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.filter-btn.is-active {
  background: #0284c7;
  color: #fff;
  border-color: #0284c7;
}

テキスト検索とカテゴリを同時に絞り込む（複数条件）

$(function () {
  var currentFilter = 'all';
  var currentKeyword = '';

  function applyFilter() {
    $('.card-item').each(function () {
      var categoryMatch = (currentFilter === 'all') ||
                          ($(this).data('category') === currentFilter);
      var textMatch     = $(this).text().toLowerCase().includes(currentKeyword);

      // 両方の条件を満たす場合のみ表示
      $(this).toggle(categoryMatch && textMatch);
    });

    var count = $('.card-item:visible').length;
    $('#hit-count').text(count);
    $('#no-result').toggle(count === 0);
  }

  $('.filter-btn').on('click', function () {
    currentFilter = $(this).data('filter');
    $('.filter-btn').removeClass('is-active');
    $(this).addClass('is-active');
    applyFilter();
  });

  $('#search-input').on('input', function () {
    currentKeyword = $(this).val().toLowerCase();
    applyFilter();
  });
});

ソート機能（A-Z順・Z-A順）

リストアイテムをjQueryで並び替える場合は、配列にソートしてからDOMに追加し直します。

$(function () {
  $('#sort-asc').on('click', function () {
    var $list = $('#item-list');
    var items = $list.find('.list-item').toArray();

    items.sort(function (a, b) {
      return $(a).text().localeCompare($(b).text(), 'ja');
    });

    // DOMを並び替えた順で追加し直す
    $.each(items, function (i, item) {
      $list.append(item);
    });
  });

  $('#sort-desc').on('click', function () {
    var $list = $('#item-list');
    var items = $list.find('.list-item').toArray();

    items.sort(function (a, b) {
      return $(b).text().localeCompare($(a).text(), 'ja'); // 逆順
    });

    $.each(items, function (i, item) {
      $list.append(item);
    });
  });
});

まとめ

jQueryでリストやテーブルを絞り込む実装のポイントをまとめます。

• テキスト絞り込み: input イベント + text().toLowerCase().includes() + toggle()
• カテゴリフィルター: data-category 属性 + ボタンの data("category") と比較
• 複数条件: 現在の状態を変数で管理し、どちらが変更されてもフィルタ関数を再実行
• 件数表示: フィルタ後に $(".item:visible").length で件数取得
• ソート: .toArray() で配列化→sort()→append() で追加し直す

関連記事: フィルター機能の実装完全ガイド / 検索サジェスト（オートコンプリート）機能 / 文字列をハイライトする完全ガイド

よくある質問（FAQ）