jQuery search for HTML select list doesn't work for large dataset

Question

I have a select option pane in HTML and a search bar to filter the items in the select list.

For SMALL (<50,000) entries in my select list the jQuery code for search works fine, but my code DOESN'T scale.

How can I re-vise my code to work for LARGE datasets?

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