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>

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:


  // You can also order the list (optional)
  $(".kbyte-sl ul").each(function() {

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


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.