Executing ajax code after a few seconds of inactivity from the user

Question

Hey folks,

I'm new here so please go easy on me. This is somewhat of a confusing situation. :)

I'm working on a search input in which a user enters a name of another user (or part of a name) in a search text box and then a list of users matching that search string is returned. The problem is that it is a bit slow when there are tens of thousands of users involved. Due to this slowness, when the user quickly enters a name into the search input, the screen will begin to flash search results for each key stroke (well after the user has already entered the search string in). It's like a severely delayed reaction.

For instance, if I enter in the name 'Wendy', the search results for the search string 'W' (the first character I entered) will not even be displayed yet. The search results for the letter 'W' will then be displayed, followed by 'We' and so on and so forth even though i've already typed the full name and just want to see the results for 'Wendy'.

What I want to do is only perform the search when the user has not entered anything for a certain period of time (i'm thinking two seconds). Otherwise, the word 'Searching' will be displayed. The code of the Javascript method is below. Just as a note, that code currently works for searching through the users, I just need to implement the delayed execution.

function updateSearchResults() {
    if($F('searchString').length > 0){
        Element.update($('searchResultsScrollBox'), '<h3>Searching...</h3>'); 
        $('searching').style.display = 'block';
        var url = '<c:url value='ajaxFrontGetUsers.html'/>';
        var ajax = new Ajax.Updater({success: 'searchResults'}, url,
        {method: 'post', parameters: $('searchForm').serialize(true)});
         $('searching').style.display = 'none';
     }
}

I hope this all makes sense. Thanks in advance for anyone that can help.

Answer 1

Try the following steps:

1. Every few milliseconds, check to see if the textbox has new data in it.
2. If the textbox has new text, execute your Ajax, and copy the text to a variable (for comparison in step 1).

If you want to improve performance from there, activate the timer whenever the user types something, and deactivate it when the Ajax call is made.

Answer 2

Hey, thanks for your answer. I ended up setting 500 millisecond intervals in which a javascript function would continuously check to see if new characters were entered in the search string within that 500 millisecond time period. If they were, the search function would be called to search on the string the user had entered. Otherwise, it would wait another 500 milliseconds until the user had stopped typing. In the end, it's very similar to what you proposed. Thanks again!

Answer 3

Or you could put an "onkeypress"event handler on the item that clears some global variable or cancels a timer to keep the AJAX event from firing. I know Prototype implements this for you via it's in-place editor and the "frequency" option. (I believe it sets a timeout timer that it cancels after every key press.)