Filter in DIV Content

Question

I made this jsFiddle to search / filter the content of the div that I get from the XML response. But I did it for only one text box. Can anyone help me with the implementation for the next three?

For instance:

If I type pd001 , it shows the first 2 lines, and if I type the insert, it should get and filter from the current visible list, and not from the whole list.

Please help me with this.

Answer 1

If I'm not mistaken, you should try to do this: if I search for 2 lines based on pd001 and put paste in the next text field, then it should filter only these 2 lines, not the entire grid. And the same functionality for all other text fields. Actually you need b / w textboxes dependencies.

Try the following:

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

Answer 2

You only filter one column, this can help you.

 $("#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(); } }); }); }); });​