Question

I have written a search filter. It shows/hides some thumbnails in a video gallery based on text typed into an input field. Te input field has a keyUp event.

$('.videoSearch').keyup(function(e){
  var searchString = $(e.srcElement).val();
  var el = $($(e.srcElement).parents().find('.videoThumbs').first());
  $(el).find(".title:not(:contains('"+searchString+"'))").each(function(i,e){
   $(e).parent().parent().parent().parent().parent().parent().fadeOut(300);
  });
  $(el).find(".title:contains('"+searchString+"')").each(function(i,e){
   $(e).parent().parent().parent().parent().parent().parent().fadeIn(300);
  });
 });

It works great in Opera, IE (7,8) and Chrome but in firefox.
The keyUp event fires as expected (also in firefox) but no thumbs gets hidden. Firebug logs no errors in the console.

Any help would be appreciated
Thanks in advance
\JePpE

Answer 1

As a workaround you can use the filter function and code the criteria manually:

$(".title").filter(function() { return $(this).html().indexOf(searchString) < 0; })
    .each (...);

Should work under any browser.