javascript - ユーザー入力に基づいて div をフィルタリングし、同時にイベント バインディングを維持する方法が必要

Question

現時点では、配列をarray.filterでフィルタリングし、正規表現を渡しています。フィルタリングしている配列は、div の内容に基づいています。

その div の各子 div にはテキストがあり、それを抽出し$.text()て独自の配列に入れて、フィルター処理できるようにします。次に、フィルター処理された配列の内容を出力します。

問題は、フィルタリングには文字列の配列が必要であるため、別の配列を作成してフィルタリングし、html に出力することです。ただし、ユーザーがリスト内の項目の 1 つをクリックしても、イベントにバインドされていない div をクリックするため、何も起こりません。ドキュメントの準備ができたらバインドを行い、バインドされたイベントを使用してdata-item-pageid属性の値を取得します。

data-item-pageidクリックされた要素にアクセスでき、それでも高速な方法が必要です。ユーザーが入力するたびにイベントをもう一度バインドしたくないので、ロジックを変更する必要があると思います。正規表現に一致しない div を非表示にする必要があります。

これはhtmlです：

<div class="content">
    <div class="categories">
        <div class="item" data-item-pageid="1">text1</div>
        <div class="item" data-item-pageid="2">text2</div>
        <div class="item" data-item-pageid="3">text3</div>
    </div>
    <div class="categories">
        <div class="item" data-item-pageid="4">text4</div>
        <div class="item"data-item-pageid="5">text5</div>
        <div class="item"data-item-pageid="6">text6</div>
    </div>
</div>
<div class="filter_result"></div>

これは JavaScript コードです。

// Binds the click event for each category item
$('.category_item').click(function() {
   console.log($(this));
});

...

// Array for filter
filterArray = [];
for (var i = 0; i < $categoryItems.length; ++i) {
    filterArray[i] = $($categoryItems[i]).text();
}

...

function filterList(key) {

    var result = filterArray.filter(/./.test.bind(new RegExp(key, 'i')));

    if (key != '' || key) {
        var markup = []; //ugh
        for (var i = 0; i < result.length; ++i) {
            markup += '<div class="category_item">' + result[i] + '</div>';
        }

        if ($categoryItems.is(':visible'))
            $categoriesDiv.toggle();

        $filteredResult.html(markup);
    } else {
        $filteredResult.html('');

        if (!$categoryItems.is(':visible'))
            $categoriesDiv.toggle();
    }
}