0

I have a page I'm building which is powered primarily with AJAX. I want the searching on the page to be asynchronous so that as the user types, the search results change on the fly. I was able to make this work somewhat by sending an AJAX call on keyup from the text box, and it works well in Chrome, FF, etc. The only problem I'm having is in IE7. The page starts to get really slow as you type, so I'm assuming that perhaps the function to call the AJAX is being opened several times without being closed, causing the page to get slow. Is there an easy way to do this where I can basically end the current AJAX call if another key is pressed? Or is there maybe some other reason that IE could be slow? The general code is:

$('.search_input').keyup(function(e) { make ajax call and populate results }

Thanks in advance for your help.

Munzilla
  • 3,805
  • 5
  • 31
  • 35
  • 1
    You can use .abort() as detailed here: http://stackoverflow.com/questions/446594/kill-ajax-requests-using-javascript-using-jquery – Brian Flanagan Mar 11 '11 at 17:14
  • Just be aware as of jQuery 1.5 ajax calls return a jqXHR and not an XHR, although there is still backwards compatibility for XHR methods like `abort()` you are not getting an XHR returned. http://api.jquery.com/jQuery.ajax/#jqXHR – Quintin Robinson Mar 11 '11 at 17:23

2 Answers2

0

Use jQuery.Load() to keep loading a seperate page into a placeholder element (div for example), and pass the value of 'search_input' as a querystring value each time.

This will give that new Google search feel, if thats something youre after

Curtis
  • 101,612
  • 66
  • 270
  • 352
0

Hmm...I have something just like this and I tested it out in IE7 without receiving any slowdowns. Here's what my code looks like:

$("#key").keyup(function(event) {
        if(event.which != '13') {
            $.get("hash.php", {key: $("#key").val()}, function(hashes) {
                $("#hashvalues").html(hashes);
            });
        }
    });

"#key" is a text input field, "hash.php" is the current page, and "#hashvalues" is the main container div on the hash.php page.

Are you returning an insane amount of data for any reason? I've seen IE slow way down if there's a LOT of HTML returned.

Aaron
  • 10,386
  • 13
  • 37
  • 53
  • I wouldn't say it's an INSANE amount of data, but unfortunately (beyond my control currently) the XML that is returned is pretty bloated, so maybe that's the problem. I'll try the abort() method mentioned above. – Munzilla Mar 11 '11 at 19:08
  • I see. Good luck. Also, if you don't need all the XML, you could always pick out what you need from the data returned and use it instead of using all of it (if that's possible in your situation). You could do $('.search_input').keyup(function(e) {"page.php", {somedata}, function(data) {data = $(data).find("only the content you need"}; $("container").html(data);} – Aaron Mar 11 '11 at 19:21