JQuery Searchable List

Some time ago I needed to filter and order the elements of a list. After some research, I came across this blog, but the proposed solution had several bugs and limitations.

My release of the plugin has these features:

  • You can use multiple lists
  • You can customize the style and the place of the search box

Take a look to the demo.

This is the html code to use this JQuery plugin:

<div class="kbyte-sl">
<h1>Seek and destroy:</h1>
<div class="kbyte-slsearchbox">Find:</div>
<ul>
	<li>Golf</li>
	<li>Alpha</li>
	<li>India</li>
	<li>Bravo</li>
	<li>Echo</li>
	<li>Foxtrot</li>
	<li>Charlie</li>
	<li>Delta</li>
	<li>Hotel</li>
</ul>
</div>

You can customize the div as you like (the title is a customization for example), but be sure to put the search box and the list somewhere.

This is the Javascript code for the ready event:

$(document).ready(function()
{
  $(".kbyte-sl").KSearchableList();

  // You can also order the list (optional)
  $(".kbyte-sl ul").each(function() {
    $(this).children().sort(sortAlpha1).appendTo(this);
  });
});

Obviously the plugin is being improved and modified according to your wishes.

Download

JQuery plugin: kbyte-searchablelist-1.0.js.gz
Example: kslexample.tar.gz

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.