Ever Wanted to have a way to filter/search a list without having to code extra to the serverside? Well maybe the jquery QuickSearch plugin from rikrikrik.com might be the answer

Recently I came across the need to filter my results after they had been displayed. I really didn’t want to start messing with optional WHERE statements in teh php to control the output of the php as that was rather annoying.

Just at that moment, up popped a tweet fron jQuery telling me about a plugin called QuickSearch after taking a look at it, I found that the search options were nice and simple to use. So I went about implementing it.

The Plugin (available from http://rikrikrik.com/jquery/quicksearch/) was quickly installed and a few lines of js later it was up and working, nicely hiding the elements set up that didn’t match the search term, quick, simple. Nice.

Setup

1. Download jQuery (is you don’t already have it) and Link it to your document
2. Download the plugin and place into the right place (like /js possibly)
3. Link to the file <script type=”text/javascript” src=”/js/jquery.quicksearch.js”></script>
4. Setup the JS to load the Quicksearch

for Example, lets take the setup list we just had:
Html:

<ul id="listings">
	<li>Download jQuery (is you don't already have it) and Link it to your document</li>
	<li>Download the plugin and place into the right place (like /js possibly)</li>
	<li>Link to the file <script type="text/javascript" src="/js/jquery.quicksearch.js"></script></li>
	<li>Setup the JS to load the Quicksearch</li>
</ul>

JS

$(function(){ /* Wait for Document Ready */
/* take the items we want searching and call quicksearch on them

*/
$('ul#listings li').quicksearch({
position: 'before',
attached: '#listings',
loaderText: '',
delay: 100
});
});

This will create the demo you can see over at http://jsbin.com/atafi as you type into the box you can search the list.. only displaying items that match.

Now for the fun part.
When you call the .quicksearch function.. it indexes the content of the items you have passed. So we can actively enhance this search by having hidden data in side each element..

Html:

<ul id="listings">
	<li>Download jQuery (is you don't already have it) and Link it to your document<span style="display:none">1 first 1st</span></li>
	<li>Download the plugin and place into the right place (like /js possibly)<span style="display:none">2 second 2nd</span></li>
	<li>Link to the file <script type="text/javascript" src="/js/jquery.quicksearch.js"></script><span style="display:none">3 third 3rd</span></li>
	<li>Setup the JS to load the Quicksearch<span style="display:none">4 fourth 4th</span></li>
</ul>

Just using exactly the same JS as before we now can search to options by using 4 or third for example..
http://jsbin.com/exumu

Finally now we have the basics.. we can really go to town.
1st we need to Hide the quicksearch with css

#quicksearch { display: none; }

This will hide the quicksearch form.

Next we take our html and add a couple of buttons

<input type="button" id="btnclear" value="reset" />
<input type="button" id="btn1" value="show 1" />
<input type="button" id="btn2" value="show 2nd" />
<input type="button" id="btn4" value="show fourth" />
<ul id="listings">
	<li>Download jQuery (is you don't already have it) and Link it to your document<span style="display:none">1 first 1st</span></li>
	<li>Download the plugin and place into the right place (like /js possibly)<span style="display:none">2 second 2nd</span></li>
	<li>Link to the file <script type="text/javascript" src="/js/jquery.quicksearch.js"></script><span style="display:none">3 third 3rd</span></li>
	<li>Setup the JS to load the Quicksearch<span style="display:none">4 fourth 4th</span></li>
</ul>

and update the js to:

$(function(){
  /* append to the end of the document */
  $('ul#listings li').quicksearch({
    position: 'append',
    attached: 'body',
    loaderText: '',
    delay: 100
  });
  $('#btn1').click(function(){
    $('.qs_input').val('1').keydown(); /* Set key and trigger keydown, which is what quicksearch responds to */
  });
  $('#btn2').click(function(){    $('.qs_input').val('2nd').keydown(); });
  $('#btn4').click(function(){    $('.qs_input').val('fourth').keydown(); });
  $('#btnclear').click(function(){    $('.qs_input').val('').keydown(); });
});

This gives us clickable buttons that do our filtering using the quicksearch plugin. Demo is here: http://jsbin.com/obixa

As you can see this makes for a interesting system.
Hope you get as much use out of this as I am

~ Kat ~