"Innovation comes only from readily and seamlessly sharing information rather than hoarding it."- Tom Peters
Development Blog

Modify jQuery's Quicksearch plugin to include reset button

This tutorial extends Rik Lomas' jQuery plugin quickSearch (r tikrikrik.com/jquery/quicksearch/) to add a reset button once searching has begun.  It is fully customizable, even down to the text the button contains.


To follow through this tutorial, you will first need to have the quicksearch plugin, which can be found here.  

At work, we recently had a client that wanted to search through a table.  This plugin worked great for that.  Well, then he decided it would be great to have a little button next to the text field that allows the user to clear the search, and have the table return to its default state.  Well, that meant diving into the code.  So... here's how to do it...

 

When you open the file, you will find several functions that do different things.  You will also see near the bottom, a list of options.  We will need to first add some options for the reset button. Here is what I used:

reset: false,					//Is reset enabled? (true/false)
resetId: 'resetQS',				//ID for reset button.
resetClass: null,				//Class for reset button.
resetLabel: 'Reset',			//Text inside reset button.

You can see the comments for what each of these do. Now, let's put those to work!

We first will make the function that actually inputs the button.  Place this anywhere with the other functions (I put it in front of the init() function.

 

function addReset() {
	$("#" + options.formId + " input." + options.inputClass).after("    ");
	$("#" + options.resetId).click( function() { 
			$("#" + options.formId + " input." + options.inputClass).val('');
			qs();
		} );
}

This jQuery function will create the button with the desired id, class, and label, and place it after the textbox inserted when quicksearch starts up.  You will also notice that the onclick of the button is created.  The way it works is that it clears the search field, and then actually re-searches the table.  Since the search box is empty, the entire table will be revealed.

Now that the button has been added, we need to check to see if it needs to be visible.  This function will be called checkReset():

function checkReset() {
	if ($("#" + options.formId + " input." + options.inputClass).val() != '') {
		$("#" + options.resetId).css('display', 'inline');
	}
	else {
		$("#" + options.resetId).hide();
	}
}

This function basically just checks to see if the search box is populated. If so, show the button. If not, hide it.

Now that we have the button setup, we need to actually have it start up on initialization of the quicksearch. To do so, we need to call addReset() inside the init() function, if the reset option is set to true. Here's how I did it:

if (options.reset) {
	addReset();
}

 

Pretty simple, huh? Now that it's added, we need to test for when the button needs to be displayed. Since the qs() function is called every time the user types anything in the search box, that would be a great spot to place a call to checkReset(). So, do it like this:

if (options.reset) {
	checkReset();
}

 

Well, that's all you the modifications you have to do for the quicksearch.js file! Now, to implement it, all you have to do is add it into your options when initializing the quicksearch plugin:

qsObject = $('table#projectstable tbody tr').quicksearch({
  	position: 'before',
 	attached: 'table#projectstable',
  	labelText: 'Search',
  	reset: true,
  	resetClass: "resetButton",
  	resetLabel: "Clear Search",
  	onBefore: function() { 	hideAllOpenedDetails(); updateProjectCount();},
  	onAfter: function() { updateProjectCount(); }
});	

Remember, since we are using a label named resetLabel, you can theme your button however you wish!

Feel free to post any comments, or any suggestions on how to make this even better! Thanks!