GitHub - styledev/jquery.multiplelivesearch.js: jquery.livesearch expanded with the ability to have multiple instances and allow sort/drag between lists.

styledev / jquery.multiplelivesearch.js Public

Notifications You must be signed in to change notification settings
Fork 0
Star 3

jquery.livesearch expanded with the ability to have multiple instances and allow sort/drag between lists.

www.styledev.com

Notifications

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
Flash		Flash
css		css
images		images
js		js
README		README
demo.html		demo.html

Repository files navigation

Title: jquery.MultipleLiveSearch v1.0
Author: Dewey "Styledev" Bushaw
Updated: 10-17-09

About:

This plugin is the result of expanding on John Resig's refractor of John Nunemaker's jquery.livesearch jquery plugin. It adds the following features:

    *  Multiple Instances
    * Sort/Dragable Lists
    * Reset search by:
          o Escape key
          o Delete button

References for jquery.livesearch:

    * v1.0 - jquery.livesearch.js (John Nunemaker)
	http://orderedlist.com/demos/quicksilverjs/javascripts/jquery.livesearch.js
	http://orderedlist.com/articles/live-search-with-quicksilver-style-for-jquery
	http://orderedlist.com/demos/quicksilverjs/jquery.html

    * v2.0 - jquery.livesearch.js (John Resig)
	http://ejohn.org/apps/livesearch/jquery.livesearch.js
	http://ejohn.org/blog/jquery-livesearch/

Install MultipleLiveSearch:

	1. Insert this into the <head> area:
	
		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
		<script type="text/javascript" src="js/quicksilver.js" charset="utf-8"></script>
		<script type="text/javascript" src="js/multiplelivesearch.js" charset="utf-8"></script>
 
		<script type="text/javascript">
			$(document).ready(function(){
				droplist(".clients",".clients",'.live_clients_list');
				droplist(".employees",".employees",'.live_empls_list');
        	 
				$('.live_search').focus(function() {
					var live_class = $(this).attr("id");
					$(this).liveUpdate("."+live_class,$(this),$('.live_search_clear'));
				});
			});
		</script>
	
	2. The input field "id" needs to be the same as the class name of the list(s) you wish to search and the "class" should is how the plugin knows what to use for the filter.
	
		<label>clients</label>
		<input type="text" value="" name="live_search" id="clients" class="live_search"/>
		<img src="images/delete.png" width="16" height="14" alt="Delete" class="live_search_clear"/>
	 
		<ul class="live_clients_list clients">
		    <li>Apolit</li>
		    <li>Inksaint</li>
		    <li>OverridePro</li>
		    <li>Styledev</li>
		    <li>Vlytics</li>
		</ul>
	 
		<label>assign to project</label>
		<ul class="live_clients_list clients"></ul>
	 
	 
		<label>employees</label>
		<input type="text" value="" name="live_search" id="employees" class="live_search"/>
		<img src="images/delete.png" width="16" height="14" alt="Delete" class="live_search_clear"/>
	 
		<ul class="live_empls_list employees">
		    <li>Apolit</li>
		    <li>Inksaint</li>
		    <li>OverridePro</li>
		    <li>Styledev</li>
		    <li>Vlytics</li>
		</ul>
	 
		<label>assign to project</label>
		<ul class="live_empls_list employees"></ul>