MultipleLiveSearch (v1.0): jQuery LiveSearch modified for Multiple Instances and Escape/Delete Image

This plugin takes John Resig's version of John Nunemaker jquery.livesearch and adds the following features:

jquery.livesearch.js versions:

Check for Updates

Example of MultipleLiveSearch:

Delete
  • Apolit
  • Inksaint
  • OverridePro
  • Styledev
  • Vlytics
    Delete
    • Bushaw, Dewey
    • Hasbard, Rich
    • Hathorne, Justin
    • Hunter, Scott
    • Jones, Mat

      Link to JS / Enable LiveSearch / Create Sortable Lists:

      Insert this after your calls to all external JS files in 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>

      HTML:

      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>

      Contents of jquery.multiplelivesearch.js:

      			jQuery.fn.liveUpdate = function(list,inputfield,clearbutton){
				list = jQuery(list);
				inputfield.keyup(function(e) {if (e.keyCode == 27) { $(this).val('') }});
				clearbutton.click(function() {
					$(this).siblings("input."+inputfield).val("");
					$(this).siblings("input."+inputfield).focus();
				})
				if ( list.length ) {
					var rows = list.children('li'),
						cache = rows.map(function(){
							return this.innerHTML.toLowerCase();
						});
					this
						.keyup(filter).keyup()
						.parents('form').submit(function(){
							return false;
						});
				}
				return this;
				function filter(){
					var term = jQuery.trim( jQuery(this).val().toLowerCase() ), scores = [];
					if ( !term ) {
						$(this).siblings("img."+clearbutton).hide();
						rows.show();
					} else {
						$(this).siblings(clearbutton).show();
						rows.hide();
						cache.each(function(i){
							var score = this.score(term);
							if (score > 0) { scores.push([score, i]); }
						});
						jQuery.each(scores.sort(function(a, b){return b[0] - a[0];}), function(){
							jQuery(rows[ this[1] ]).show();
						});
					}
				}
			};
			
			function droplist(id1,id2,connect_class){
				$(id1+","+id2).sortable({
					connectWith: connect_class,
					placeholder: 'ui-state-highlight'
				}).disableSelection();
			};