Type to filter list JQuery plugin

##Example Usage

Update

23.5.2015

• The letters for the filtered results will be displayed in bold.

Function

Filters a list with the entered keyword. It searches through the <a>tag given text.

Demo

Downdload this repo and double click on index.html.

HTML

One <input> field, one <ul> tag and as many <li><a>text</a></li> tags as you wish. A container to wrap everything up.

<div class="typeAndFilter">     <div>           <input data-origin-value="displayed example" value="displayed example" class="" type="text" />     </div>     <ul>         <li class=""><a href="/example-1/">example 1</a></li>         <li class=""><a href="/example-2/">example 2</a></li>         <li class=""><a href="/example-3/">example 3</a></li     </ul> </div> 

JQuery

Use the plugin as follows.

$('.typeAndFilter').typeToFilter(); 

Options

Enter a custom message for the no-result message or turn it off with one of the values false, null or ''.

$('#anyClassOrID').typeToFilter({     zeroResultMessage: 'Custom Message' <!-- default: ... can not be found! --> }); 

CSS

The plugin doesn't access any css selectors for it to traverese.

Elements not containing the search key will be assigned with the class hidden.

<li class="hidden"><a href="example">example</a></li> 

Add to your css .hidden{ display: none; } to hide all tags that are not in the range.

The no result message has the class noResults.

<li class="noResults">Message</li> 

Installation

Download the file jquery.typeToFilter.js (or minified version) and add to your project.