jquery.lookingfor

Fast search as you type jQuery plugin.

It's very small (minified — 2.5kb, gzipped — 1.2kb), very fast and supports old browsers (IE6+).

jquery.lookingfor plugin searches text in list items (<li>) and hides unmatched items. It works not only for <li>s, but for any HTML element on a page. Any input field (input, textarea) can be transformed to 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 of items for following search and an input field (optional):

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

Call lookingfor() method with necessary options:

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

Options

All options are optional.

• input — input field's selector;
• items — item's selector, default – 'li';
• highlight — set true to highlight matched text, default — false;
• highlightColor — #RRGGBB background color for matched text, default – #FFDE00;
• onFound {Function(HTMLElement item, String query)} — callback, will be called when text is found.