jquery.multiplelivesearch.js

Home > jquery.multiplelivesearch.js

jquery.multiplelivesearch.js

Jquery.multiplelivesearch.js is a project mainly written in JAVASCRIPT and ACTIONSCRIPT, it's free.

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

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>

Previous：lcc-scheduling-tester

Next：MHSVLC