Narrow a list of items as you type with javascript

I am trying to find a plugin or a solid way to narrow a list of items as a user types.

Essentially there would be a list that is always visible containing product names for users to scroll through. At the bottom would be a form where you can type in the name of a product. As you type the list is narrowed down.

I have been trying to find a way to adapt something like jQuery UI's autocomplete to work in this way but having some trouble.

Anyone created something like this before or have any ideas?


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


<ul id="products">
<input id="filter" />


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

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?

Need Your Help

How to filter object array based on attributes?

javascript jquery

I have the following JavaScript array of real estate home objects:

Compile with Proguard gives SimException: "local variable type mismatch"

android proguard

When I compile my Android Application with Proguard enabled I get the following error: