Поиск jQuery для списка выбора HTML не работает для большого набора данных

Question

У меня есть панель выбора выбора в HTML и панель поиска для фильтрации элементов в списке выбора.

Для МАЛЫХ (<50 000) записей в моем списке выбора код jQuery для поиска работает нормально, но мой код НЕ масштабируется ,

Как я могу пересмотреть мой код для работы с БОЛЬШИМИ наборами данных?

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