Nerd Talk

Search functionality can be done in two ways, (1) the usual form submit that reloads the page to submit the query and (2) through Ajax, doesn’t require a page reload because it sends the query in the background which is cool. If you’re working on a search functionality it is best to always optimize the process because every time the user hits the submit button your server gets hit in the head to perform the request. As we know, searching requires database query and we don’t want to request from the database that often because it’ll bite you in the ass when there’s a lot of searches going on. In this post I won’t be providing tips on how to optimize search queries or any caching methods but this is a start for an optimized search functionality. This is to help you save server requests if you’re working on a similar search functionality.

If you’re working on a search functionality that triggers onkeyup:

You know, the kind of search functionality where you submit the request to the server when the user stops typing the keyword to save them time clicking the submit button or if you don’t have a submit button at all. When doing this we must make sure that we only submit or send the request to the server once the user had stopped typing. So if the user wanted to search for ‘krispy kreme’, take note if you’re using onkeyup event, your Search() function will get triggered every time your user lifts his finger off the keyboard key. Imagine the amount of request you’re sending to the server when searching for ‘krispy kreme’, that’s 12 characters, 12 Ajax requests. Code below will help to only send a request to the server when the user had stopped typing, we assume that the user already finished typing the search keyword.

// initial interval value
var SearchTimeOut = 0;
// how long before the execution starts; in milliseconds (1000 = 1 second)
// just the value i'm happy with, not too fast or slow
// increase value if you think users type 1 ltr (letter per second) >:)
var Interval = 333;

// stores the search keyword
var CurrentSearchKey = '';
var Search = function(obj) {
	// get the keyword from the field
	var keyword = obj.value;

	// cancel the previous search
	// SearchTimeOut contains a value more than zero when assigned with
	// a setTimeout()
	if(SearchTimeOut > 0)
		ResetSearch();

	// we only start a request when the search keyword is different from
	// the current keyword
	if(CurrentSearchKey == keyword)
		return;

	// the magic, we attach the search process to setTimeout to put in an
	// interval every time the Search() is executed
	// setTimeout() returns a value assigned to SearchTimeOut everytime
	// it's called since SearchTimeOut now holds whatever StartSearch()
	// is doing when we do a keyup event, everytime we execute Search()
	// we will cancel SearchTimeOut and start a new one, that's what makes
	// sending a request to the server lesser because we only do a request
	// to the server when we stop typing a keyword
	SearchTimeOut = setTimeout("StartSearch('"+keyword+"')", Interval);
}

// the actual search function
var StartSearch = function(keyword) {
	CurrentSearchKey = keyword;
	// here is where you put your Ajax request code, regardless if you're
	// using jQuery, Prototype JS, or the conventional way of doing Ajax
}

// cancels the previous search interval
var	ResetSearch = function() {
	// this is what cancels the setTimeout interval assigned
	// to SearchTimeOut
	clearTimeout(SearchTimeOut);
	SearchTimeOut = 0;
}

There you have it, hope that helps!