javascript - DIV コンテンツでフィルター処理する

Question

XML 応答から取得するコンテンツを検索/フィルタリングするために、この jsFiddleを作成しました。divしかし、私は1つのテキストボックスだけでそれをしました. 次の3つの実装を手伝ってくれる人はいますか?

例えば：

入力pd001している場合は最初の 2 行が表示され、paste と入力すると、リスト全体ではなく、現在表示されているリストに到達してフィルタリングする必要があります。

これについて私を助けてください。

Answer 1

私が間違っていなければ、次のテキストボックスに基づいて2行を検索しpd001て配置すると、グリッド全体ではなく、それらの2行のみをフィルタリングする必要があります。paste他のすべてのテキストボックスでも同じ機能です。実際、テキストボックスの白黒の依存関係が必要です。

これを試して：

    $(".productid").filter(function () {
        $(this).parent().hide();
        return $(this).text().toLowerCase().indexOf(text0) != -1
    }).parent().show();

    $(".product:visible").filter(function () {
       $(this).parent().hide();
       return $(this).text().toLowerCase().indexOf(text1) != -1; 
    }).parent().show();

    $(".quantity:visible").filter(function () {
       $(this).parent().hide();
       return $(this).text().toLowerCase().indexOf(text2) != -1; 
    }).parent().show();

    $(".amount:visible").filter(function () {
       $(this).parent().hide();
       return $(this).text().toLowerCase().indexOf(text3) != -1; 
    }).parent().show();

デモ: http://jsfiddle.net/fbC6w/4/

Answer 2

1つの列のみをフィルタリングしています。役立つ場合があります

$("#searchone , #searchtwo ,#searchthree ,#searchfour").bind("keyup", function() {

    var map = {
        '.productid': $("#searchone").val().toLowerCase(),
        '.product': $("#searchtwo").val().toLowerCase(),
        '.quantity': $("#searchthree").val().toLowerCase(),
        '.amount': $("#searchfour").val().toLowerCase()
    };
    $('div.new').each(function() {
        $(this).hide();
    });
    $('div.new').each(function() {
        var parent_div = this;
        $.each(map, function(key, value) {
            $(parent_div).find(key).filter(function() {
                if ($(this).text().toLowerCase().indexOf(value.toString()) != -1 && value != '') {
                    $(parent_div).show();
                }
            });
        });
    });

});​