Optimised search using Ajax and keypress
You can do something like this:
$('#searchString').keyup(function(e) {
clearTimeout($.data(this, 'timer'));
if (e.keyCode == 13)
search(true);
else
$(this).data('timer', setTimeout(search, 500));
});
function search(force) {
var existingString = $("#searchString").val();
if (!force && existingString.length < 3) return; //wasn't enter, not > 2 char
$.get('/Tracker/Search/' + existingString, function(data) {
$('div#results').html(data);
$('#results').show();
});
}
What this does is perform a search (on keyup
, better than keypress
for these situations) after 500ms
by storing a timer on the #searchString
element's .data()
collection. Every keyup
it clears that timer, and if the key was enter, searches immediately, if it wasn't sets a another 500ms
timeout before auto-searching.
See this older question:
How do I make my live jQuery search wait a second before performing the search?