2009-05-07 8 views
6

入力値に応じてテーブルをフィルタリングするjQueryプラグインを探していました。jQuery検索とフィルタテーブル

私はに出くわしましたが、既に存在する入力ボックスでどのように動作させるかを理解できません。

現在、私には新しい入力フォームが作成されていますが、これは入力送信ボタンがある既存の入力ボックスで使用できるようにしたいと考えています。

答えて

1

これを行うには、コードを掘り下げて変更しない限り、このプラグインをそのまま使用することはできません。

検索入力ボックスは、独自のjavascriptによって自動的に生成され、その動作を変更するオプションはありません。

+0

@ichibanはそれを書いたとき、これはおそらく本当戻っていたが、それはもはやありません。私の答えを見てください。 –

0

@Adam、プラグインで生成されたテキストフィールドのonKeyUpを試してみてください。 は、まず、あなたがのは、それがgenerated_fldだとしましょう、そのフィールド(使用放火魔)のIDを知っておく必要があり、その後、コードは次のようになります。

$(document).ready(function() { 
    $("#my_other_input").keyup(function(){ 
     $("#generated_fld").val($(this).val()).keyup(); 
    }) 
}); 
6

時間があなたのためにあなたの質問に答えているように見えます。実際にはQuickSearchは、既存のテキスト入力ボックスに検索機能を添付することができます。

riklomasその言及:使用量は、フォームの入力が任意のより多くのスクリプトによって構築されていない、コードが後方互換性がありません、クイックサーチの最新バージョンに変更されたことを

注意を。

今日は使い始めたばかりなので、うまくいきます。少なくとも私のテスト環境(Firefox 3.6、OS X、かなり大きなデータセット)では、CPUのシェアを食べているように見えますが、それはおそらくこの特定のプラグインに固有のものではありません。

0

私はこのコードをしばらく使用しています。まず:/検索をフィルタリングする

  1. 入力テキストフィールドは実際にそれだけで、各行の最初のセルを使用し、ID「検索」
  2. を持って、あなたは簡単に(コードのコメントに従ってください)
  3. これを拡張することができます

コード:

$('#search').on('input', function() { 
    var str = $('#search').val().toLowerCase(); 
    $("#containerTable tr").each(function (index, element) { 
     var label = $(this).find("td").eq(0).html().toLowerCase(); 
     //var labelx = $(this).find("td").eq(x).html().toLowerCase(); 
     //... 

     if (str == '' || label.indexOf(str) != -1) { 
      // || labelx.indexOf(str) != -1) ... 
      $(this).css("display", "table-row"); 
     } 
     else { 
      $(this).css("display", "none"); 
     } 
    });   
});