Question

The following code is used as a visual filter on an application I’m building. Basically, when a user types something into the textbox with id ‘filter’, the code below runs to hide those that match.

$('#filter').keyup(function() {
        delay(function(){
            $(".patient:not(:contains('" + $('#filter').val() + "'))").fadeOut();
            $(".patient:contains('" + $('#filter').val() + "')").fadeIn();
        }, 300 );
        });

The code works fine in Firefox and Chrome, but in IE7 two things happen that I don’t like:-

1) The selected divs dont fadeOut/In – they just appear..
2) Occasionally, I get an error from IE that the script is taking too long and may become unresponsive.

In terms of problem 2 I’ve read that returning control to the browser (again maybe using a timeout) might prevent the issue but I’m not sure if this is possible using my code or how to do it.

Can you guys help?

(PS – for the record, I HAVE to use IE7 in my organisation. Bad, I know, but I can do nothing about this, just in case your solutions involve changing browser :))

Answer 1

I managed to fix it and prevent the errors. Maybe I was just asking too much of the browser, so I changed the code as follows:-

$('#filter').keyup(function() {
        delay(function(){
            $(".patient").hide();
            $(".patient:contains('" + $('#filter').val() + "')").fadeIn();
        }, 300 );
        });

This now works pretty much perfectly.