jquery - jQuery 搜索 HTML 选择列表不适用于大型数据集

Question

我有一个 HTML 中的选择选项窗格和一个搜索栏来过滤选择列表中的项目。

对于我的选择列表中的 SMALL (<50,000) 条目，用于搜索的 jQuery 代码可以正常工作，但我的代码不能缩放。

如何重新修改我的代码以适用于 LARGE 数据集？

HTML：

<select name="trends[]" multiple="multiple" id="trends" size="35"> </select>                      

<input type="text" id="search" size="35" placeholder="Search for trend">            

jQuery：

var showOnlyOptionsSimilarToText = function (selectionEl, str) {
        str = str.toLowerCase();
        // cache the jQuery object of the <select> element
        var $el = $(selectionEl);

        if (!$el.data("options")) {
            // cache all the options inside the <select> element for easy recover
            $el.data("options", $el.find("option").clone());
            }

         var newOptions = $el.data("options").filter(function () {
         var text = $(this).text();
         text = text.toLowerCase();
         return text.match(str);
    });
       $el.empty().append(newOptions);
};

$("#search").on("keyup", function () {
       var userInput = $("#search").val();
       showOnlyOptionsSimilarToText($("#trends"), userInput);
});