So David Blaine got a really bad rap about it and people started putting a lot of pressure on him to do regular card tricks that just told a story or something.

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!

Sharing is caring ^_^

// Sample custom object
var CustomObject = function() {
	this.props = {
			property: 'value'
		}
}

CustomObject.prototype = {
	CustomMethod: function() {
		alert(this.props.property);
	}
}

// Instantiate the custom object
var foo = new CustomObject;

// Doing that enables you to do this
foo.CustomMethod(); // alerts 'value'

// will not work because the object is not created as a new instance
// prototype methods not yet added to CustomObject
CustomObject.CustomMethod();

HTH

~The (B) button

Home page when I have completely nothing setup yet.

Blog splash screen when I first used Japanese characters as main elements for design. Page will redirect to the blog after 15 seconds.

Home page when I decided to close my blog for a while because I got super lazy to update.

Changed the home page again, I decided to make it blue this time with my in-game character in GoonZu (MMORPG) named agyuku (with his pink pet bunny). This is more like an under construction page because I planned something for my home page and make the blog just a part of it but it didn’t work out. Blog is back up when I used this one.

Update: Nvm I got in already xD