Not everyone has Google's mega-awesome data center with tens of thousands of servers, servers that allow them to do things like instant live search on-keydown. That's right, onkeydown, not onkeypress or keyup, which are less frequent events.
For the majority of us, if we implemented such a feature on a site that served even a million visitors per day, it would cripple our server. But, more than that, the repeated AJAX calls would make the site appear to be unresponsive.
It makes me beg the question, does a human really need results that quickly? Perhaps, for live-search, it is appropriate. But, for most applications, simply waiting a 1/2 second after the visitors last keypress to make the AJAX call would be sufficient. In fact, it might even be ideal.
As usual, one of my recent projects inspired this thought process and, in turn, this post. I was developing a mortgage calculator that produced instant results as you type. But, since one of the calculations was brute force, it took some time to complete. Two things were happening:
- As the user typed a numeric value, each keyup event was being trapped, calling an event handler to recalculate the loan figures. This took a good amount of CPU time, and in turn, made the input of the numbers very "choppy".
- While the calculations were being made on each keyup, they essentially were incorrect. For example, if a user wanted results for a loan amount of $100,000, they were forced to see the calculations for $1, $10, $100, etc, until they got to $100,000. This was extra processing that just didn't need to take place.
But, I did want the calculations to be live; I wanted to avoid the submit button, and also not force the user to leave the field (onblur) before getting their result. What to do!
It finally hit me that the JavaScript setTimeout method was exactly what I needed. When a key is pressed, I can create a timeout and assign it to a variable. If another key is pressed before that timeout is over, I'll clear that timeout and create a new one. Essentially, this will only execute the keydown handler code if it has been at least 1/2 second (in the example below) since the last keydown event.
var keyPressTimeout;
$('body').on('keydown', '.liveSearchField', function() {
clearTimeout(keyPressTimeout);
keyPressTimeout = setTimeout( function() {
// do my live search ajax calls here
},
500
);
});
If someone were to use a live search feature, typing in the word Pneumonoultramicroscopicsilicovolcanoconiosis (one of the longest words in the english language), you would save 44 AJAX requests.
Now, imagine that some chemist out there has the patience to do a good search for the chemical name of Titin (the largest known protein). We're talking about saving 190,000 AJAX requests!
http://en.wikipedia.org/wiki/Longest_word_in_English