Live Filter 1.1
LiveFilter is a very lightweight jQuery plugin that will filter a <ul> or <ol> and display only the results that match the supplied string. It is thoroughly documented and designed in a way in which it is very easy to understand for non-developers.
Example
You can view an example of the plugin at http://www.digitalinferno.net/live-filter/
How to Install
LiveFilter is very easy to install, all you have to do is include in your html the .js file along with the latest jQuery release. You can do this with the <script> tag.
To include the latest version of jQuery you can use the latest version from the Google AJAX Libraries API.
The latest version is http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
To include LiveFilter you must download the latest release and unzip it. You can then include it in your html the same way you did with the latest jQuery release. You should have the following 2 lines of code somewhere between the <head> and </head> tags on the page with the list you want to filter.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.liveFilter.js"></script>
The source of jquery.liveFilter.js might differ from the above depending on where you put it.
You must then call the LiveFilter plugin using the following.
<script type="text/javascript>
$('#wrapping_div_name').liveFilter('list_type');
</script>The #wrapping_div_name would be replaced with the id of the div that contains the list. This div must not have any other <ul> or <ol> in them, so put the list you want to filter in a new div with an id. list_type should be replaced with either 'ul' or 'ol' depending on the type of list you want to filter.
One other thing you must have is the text input that you enter the filter text into. This text input must have the class name of 'filter' and must not be part of a form. So what you would want is something similar to below.
<input type="text" class="filter" name="input_name" />
And that's it, style it and start using it!
Version History
Version 1.1 - Fixed jQuery 1.3 compatibility problem. Version 1.0 - Initial release.
