☰

HTML テーブルでリアルタイム検索とフィルターを実行する方法 質問する

tag-icon • tag-icon javascript jquery html
HTML テーブルでリアルタイム検索とフィルターを実行する方法 質問する

しばらくの間、Google で検索したり、Stack Overflow を検索したりしてきましたが、この問題を回避できません。

たとえば、果物を含む標準的な HTML テーブルがあります。次のようになります。

<table>
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

この上にテキスト ボックスがあり、ユーザーが入力するとテーブルを検索します。たとえば、ユーザーが入力するとGre、テーブルの Orange 行が消えて、Apple と Grapes が残ります。ユーザーが続けて入力すると、Green GrApple 行が消えて、Grapes だけが残ります。これでおわかりいただけたと思います。

また、ユーザーがテキスト ボックスからクエリの一部またはすべてを削除した場合、クエリに一致するすべての行が再表示されるようにする必要があります。

jQuery でテーブル行を削除する方法は知っていますが、検索を実行してこれに基づいて行を選択的に削除する方法がほとんどわかりません。これに対する簡単な解決策はありますか? またはプラグインはありますか?

誰かが私に正しい方向を指し示してくれるなら、それは素晴らしいことです。

ありがとう。

ベストアンサー1

これらの例を作成しました。

単純の指標検索

var $rows = $('#table tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

デモ:http://jsfiddle.net/7BUmG/2/

正規表現検索

正規表現を使用したより高度な機能により、行内の任意の順序で単語を検索できます。apple greenまたはと入力した場合も同様に機能しますgreen apple。

var $rows = $('#table tr');
$('#search').keyup(function() {

    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
        reg = RegExp(val, 'i'),
        text;

    $rows.show().filter(function() {
        text = $(this).text().replace(/\s+/g, ' ');
        return !reg.test(text);
    }).hide();
});

デモ:http://jsfiddle.net/dfsq/7BUmG/1133/

デバウンス

複数の行と列にまたがる検索でテーブル フィルタリングを実装する場合、パフォーマンスと検索速度/最適化を考慮することが非常に重要です。キー入力のたびに検索機能を実行するべきではないと言えば、それは必須ではありません。フィルタリングが頻繁に実行されるのを防ぐには、デバウンスする必要があります。上記のコード例は次のようになります。

$('#search').keyup(debounce(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    // etc...
}, 300));

例えばLodashから任意のデバウンス実装を選択できます。_.デバウンスまたは、次のデモで使用しているような非常にシンプルなものを使用することもできます（ここ):http://jsfiddle.net/7BUmG/6230/そしてhttp://jsfiddle.net/7BUmG/6231/。

おすすめ記事