Question

I have made this jsFiddle for searching/filtering the div content which I am getting from an XML response. But I have done it for one text box alone. Any one can help me in implementing for next three?

For example:

If I am typing pd001 it shows the first 2 rows and if I type paste it should reach and filter from the current visible list, not from the whole list.

Kindly help me out on this.

Answer 1

If I’m not wrong then you must be trying to do is that If I search 2 rows based on pd001 and put paste in the next textbox then it should filter only those 2 rows not the entire grid. And the same functionality for all the other textboxes. In fact you need dependencies b/w textboxes.

Try this:

    $(".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();

Demo: http://jsfiddle.net/fbC6w/4/