CODEWITHSUNDEEP
jqueryhtmlcachinghtml-select
Mark Kennedy
Mark Kennedy

Reputation: 1781

jQuery caching data in <select> elements SLOW

I'm trying to create a filter box for a large set of select options in a scrolling list.

I have to cache the data so that it can re-load upon a backspace. This works for smaller datasets,but it is taking WAY too long when I have about ~100,000 option items in the <select> list.

How else can I get my code to work?

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 recovery
        $el.data("options", $el.find("option"));  <------- TOO SLOW
    }



    var newOptions = $el.data("options").filter(function () {
    var text = $(this).text();
    text = text.toLowerCase();

    return this.value.toLowerCase().indexOf(str) != -1

    });

    $el.empty().append(newOptions);
};

$("#search").on("keyup", function () {

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

Upvotes: 1

Views: 541

Answers (1)

Xavier J
Xavier J

Reputation: 4624

Use the Jquery ui autocomplete, and grab the data via AJAX. You're going to max out the browser trying to do things as you are. IE will cause you the most pain. Better to leave things server side if you can.

http://jqueryui.com/autocomplete/

Upvotes: 1

Related Questions