Quicksearch - Searching through tables, lists

Quicksearch is a jQuery plugin for searching through tables, lists, etc quickly

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: deuxhuithuit.github.io

1. INCLUDE JS FILES

<script src="jquery.js"></script>
<script src="jquery.quicksearch.js"></script>

2. HTML

/* Example form */
<form>
    <input type="text" id="search">
</form>

/* Example table */
<table>
    <tbody>
        <tr>
            <td>Test cell</td>
            <td>Another test cell</td>
        </tr>
    </tbody>
</table>

3. JAVASCRIPT

$('input#search').quicksearch('table tbody tr');

Example on the <th> elements on a table row

$('input#search').quicksearch('table tbody tr', {
    selector: 'th'
});

Example of how to use with JS

var qs = $('input#id_search_list').quicksearch('ul#list_example li');
$('ul#list_example').append('<li>Loaded with Ajax</li>');
qs.cache();

Example of how to use with Ajax

var qs = $('input#search').quicksearch('table tbody tr');
$.ajax({
    'type': 'GET',
    'url': 'index.html',
    'success': function (data) {
        $('table tbody tr').append(data);
        qs.cache();
    }
});

4. OPTIONS

• delay Delay of trigger in milliseconds
• selector A query selector on sibling elements to test
• stripeRows An array of class names to go on each row
• loader A query selector to find a loading element
• noResults A query selector to show if there's no results for the search
• bind Event that the trigger is tied to. Defaults to 'keyup search'
• resetBind Event that the reset event is tied to. Defaults to 'reset'
• removeDiacritics Remove diacritics from the search input. Defaults to false.
• minValLength Establish a minimum length that the search value must have in order to perform the search. Defaults to 0.
• onBefore Function to call before trigger is called
• onAfter Function to call after trigger is called
• onValTooSmall Function to call when the value does not exceeds the minValLengthoption.
• show Function that will add styles to matched elements
• hide Function that will add styles to unmatched elements
• prepareQuery Function that transforms text from input_selector into query used by 'testQuery' function
• testQuery Function that tells if a given item should be hidden It takes 3 arguments:
  • query prepared by 'prepareQuery'
  • stripped text from 'selector'
  • element to be potentially hidden

5. CALLBACKS

Functions are always call'd or apply'd, so except this to be the plugin object.

For example:

$('input#search').quicksearch('table tbody tr', {
    'delay': 100,
    'selector': 'th',
    'stripeRows': ['odd', 'even'],
    'loader': 'span.loading',
    'noResults': 'tr#noresults',
    'bind': 'keyup keydown',
    'minValLength': 2,
    'removeDiacritics': true,
    'onBefore': function () {
        console.log('on before');
    },
    'onAfter': function () {
        console.log('on after');
    },
    'onValTooSmall': function (val) {
        console.log('value ' + val + ' is too small');
    },
    'show': function () {
        $(this).addClass('show');
    },
    'hide': function () {
        $(this).removeClass('show');
    }
    'prepareQuery': function (val) {
        return new RegExp(val, "i");
    },
    'testQuery': function (query, txt, _row) {
        return query.test(txt);
    }
});