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:
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?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With