Question

Dutch page containing DIV blocks which can be hidden using a jQuery script.

If you look at this page with IE , you will notice that the filtering (hiding/unhiding DIV blocks is very slow.

I am using IE 8, Opera 11, Firefox 11, Chrome 18.

Using any other browser: Chrome, Firefox and Opera, it’s much quicker.

• Can any bode tells me why this is ?

• Or can anyone make a suggestion to make it more responsive in IE ?

This is the snippet I use to perform the filtering :

<form class="searchBox">
   Zoek naar <input type="text" name="filterargument" id="filterargument" />
   <input type="button" name='filterbutton' id='filterbutton' value="filter..." />
   <i>(deel van de) clubnaam , de federatie of het clubnr</i>
</form>

<script type="text/javascript">
   var $filterArgument =  $("#filterargument");

   $('#filterargument').keyup( function() { performFilter(); });
   $('#filterbutton').click( function() { performFilter(); });

   function performFilter() {
      var filterArgument = $filterArgument.val();

      if (filterArgument === '') {
         $('.filterbaar').show(); }
      else {
         $('.filterbaar:not(:icontains("' + filterArgument + '"))').hide();
         $('.filterbaar:icontains("' + filterArgument + '")').show();
      }
   }
</script>
</div>

Answer 1

I don’t have any version of IE to test, but let me know if this performs better:

<script type="text/javascript">
$(function() {

 var $filterArgument =  $("#filterargument");

 $('#filterargument').keyup( function() { performFilter(); });
 $('#filterbutton').click( function() { performFilter(); });

    function performFilter() {

        var searchFor = $filterArgument.val();

        $('.filterbaar').each( function() {
            var text = $(this).text();
            regex = new RegExp(filterArgument,"gi");

            if ( text.match(regex) ) {
                $(this).show(); 
            } else {
                $(this).hide();
            }

        });
    }


});
</script>