[解決済み] HTMLテーブルでリアルタイムに検索とフィルタを実行する方法

質問

しばらくググったり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 例えば、テーブルのオレンジの行は消え、リンゴとブドウが残ります。続けて、次のように入力すると Green Gr リンゴの列が消えて、ブドウだけになるはずです。これでお分かりいただけたでしょうか。

また、ユーザーがテキストボックスからクエリの一部または全部を削除した場合、現在クエリにマッチしているすべての行が再び表示されるようにしたいです。

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

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

ありがとうございました。

解決方法は？

こんな例を作ってみました。

シンプル インデックスオブ 検索

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のものなど、どれを選んでも構いません。 _.debounce あるいは、次のデモで使用するような非常にシンプルなものを使用することもできます (debounce from ここで ): http://jsfiddle.net/7BUmG/6230/ と http://jsfiddle.net/7BUmG/6231/ .