jQuery jlistSearch plugin
Demo & Examples
https://github.com/mmuhasan/jlistsearch/tree/master/test
Version
1.0.0
Example Usage
HTML
<input type="text" id="search" class="search" rel="search-items" />
<div class="list">
<ul class="search-items">
<li>Australia</li>
<li>Austria</li>
<li>Belgium</li>
<li>Canada</li>
<li>United States </li>
</ul>
</div>
The input element should have an attribute rel which should contain the class name of the ul element. This is how the plug-in will select the right ul to filter.
jQuery
Use the plug-in as follows:
$("#search").jlistsearch({
onSelect : function(ex){
alert( ex.text());
}
});
The onSelect function will be called when you click on any of the li item.
By default a placeholder text (Start typing a search item) will be added to the search box. You can customize it using the following code:
$("#search").jlistsearch({
onSelect : function(ex){
alert( ex.text());
},
text: "you custom placeholder text"
});
Notes
- To see the placeholder text you will need a HTML5 compatible browser
License
This plug-in is available under the MIT license.
Development
Want to contribute? Welcome!