Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 749
Cawlin Avatar asked Jan 20 '09 21:01

Cawlin


2 Answers

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.

like image 131
David Avatar answered Nov 18 '22 11:11

David


How about the quickSearch plugin?

like image 28
Wardy Avatar answered Nov 18 '22 09:11

Wardy