javascript - JavaScript で入力しながら項目のリストを絞り込む

Question

ユーザーの入力に応じてアイテムのリストを絞り込むためのプラグインまたは確実な方法を見つけようとしています。

基本的に、ユーザーがスクロールできる製品名を含むリストが常に表示されます。下部には、製品の名前を入力できるフォームがあります。入力すると、リストが絞り込まれます。

jQuery UIのオートコンプリートのようなものをこのように機能させる方法を見つけようとしていますが、問題があります。

誰かが以前にこのようなものを作成したか、何かアイデアを持っていますか?

Answer 1

有効なアプローチの簡単な例を次に示します。

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

これは単純なアプローチであり、おそらく少し調整する必要がありますが、必要なものに近いものです。

Answer 2

quickSearchプラグインはどうですか？