Сузить список элементов при вводе с JavaScript

Question

Я пытаюсь найти плагин или надежный способ сузить список элементов по типу пользователя.

По существу, всегда будет отображаться список, содержащий названия продуктов, которые пользователи смогут прокручивать. Внизу будет форма, где вы можете ввести название продукта. По мере ввода список сужается.

Я пытался найти способ адаптировать что-то вроде автозаполнения пользовательского интерфейса jQuery для работы таким образом, но возникли некоторые проблемы.

Кто-нибудь создал что-то подобное раньше или есть идеи?

Answer 1

Вот краткий пример подхода, который может работать:

HTML:

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

JS:

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();
});

Это простой подход, и, вероятно, потребуется немного подправить. Но это близко к тому, что вам нужно.

Answer 2

Как насчет плагина quickSearch ?