Narrow a list of items as you type with javascript

Here's a quick example of an approach that can work:

HTML:

<ul id="products">
    <li>Apple</li>
    <li>Banana</li>
    <li>Mango</li>
</ul>
<input id="filter" />

jQuery:

var $products = $('#products li');
$('#filter').keyup(function() {
    var re = new RegExp($(this).val(), "i"); // "i" means it's case-insensitive
    $products.show().filter(function() {
        return !re.test($(this).text());
    }).hide();
});

That's a simple approach and would probably need a bit of tweaking, but it's close to what you need.


How about the quickSearch plugin?