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