A simple, lightweight jQuery plugin for implement live-search.
$.liveSearch({
selectorContainer: "ul",
selectorElementsToSearch: "li",
attributeToSearch: false,
selectorInputSearch: "#search-query",
selectorToHide: false,
selectorFixed: "li:first",
});<input type="text" id="search-query">
<ul>
<li>Header</li>
<li>Pernalonga</li>
<li>Patolino</li>
<li>Eufrazino</li>
<li>Lola Bunny</li>
<li>Frajola</li>
<li>Piu-Piu</li>
<li>Taz</li>
</ul>var objLiveSearch = $.liveSearch({
selectorContainer: "ul",
selectorElementsToSearch: "li",
attributeToSearch: false,
selectorInputSearch: "#search-query",
selectorToHide: "li",
selectorFixed: "li:first",
ajaxCallback: function(){
$.get("helpers/ajax-content.html", function(data){
var search_query = objLiveSearch.getInputSearchVal();
objLiveSearch.ajaxDone(data, search_query);
}, 'html');
},
});<input type="text" id="search-query">
<ul>
<li>Header</li>
</ul><html>
<head>
<title>Ajax Content</title>
</head>
<body>
<ul>
<li>Header</li>
<li>Pernalonga</li>
<li>Patolino</li>
<li>Eufrazino</li>
<li>Lola Bunny</li>
<li>Frajola</li>
<li>Piu-Piu</li>
<li>Taz</li>
</ul>
</body>
</html>| Option Name | Description | Type | Default Value |
|---|---|---|---|
| attributeToSearch | Name of the attribute that contains the content to be searched | string | data-search |
| selectorContainer | Main container of elements | string | table |
| selectorElementsToSearch | Selector of elements to be searched | string | td |
| selectorInputSearch | Selector of input field search | string | input#search_query |
| selectorHead | Selector of the Heads | string | false |
| selectorToHide | Selector element to be hidden | string | false |
| minCharacters | Minimum number of characters to trigger the search. | integer | 3 |
| typeDelay | Delay time at the end of typing. | integer | 500 |
| ajaxFilter | Pass false if Ajax return already filtred. | boolean | true |
| ajaxCallback | Callback function to custom ajax. | callback | false |
