johanneslamers / jquery.lookingfor

Fast search as you type jQuery-plugin

jquery.lookingfor

Fast search as you type jQuery-plugin.

Plugin jquery.lookingfor searches text in list items (<li>) and hides unmatched items. It works not only for <li>, but with anyone HTML-elements on the page. Any input fields (input, textarea) can be transformed into search filter with jquery.lookingfor.

Live demo

Install

Download latest release. Use minified or development version.

Or use bower for install:

bower install jquery.lookingfor --save

Usage

Include jQuery and jquery.lookingfor on your page:

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.lookingfor.js"></script>

Prepare list items for following search and input field (optional):

<input type="search" name="query" />
<ul id="numerals">
	<li>First</li>
	<li>Second</li>
	<li>Third</li>
	...
</ul>

Call method lookingfor() with necessary options:

jQuery(function($) {
	$('#numerals').lookingfor({
		input: $('input[name="query"]'),
		items: 'li'
	});
});

Options

All options are optional.

• input — selector for input field;
• items — item's selector, default – 'li';
• highlight — set true for highlight matched text, default — false;
• highlightColor — #RRGGBB background color for matched text, default – #FFDE00