0

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 scaleenter image description here.

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);
});
Mark Kennedy
  • 1,751
  • 6
  • 30
  • 53
  • First, don't clone the options when you store them on the data object, there's no need. – Kevin B Jan 09 '14 at 23:35
  • Here's a fiddle we can work with: http://jsfiddle.net/qYe8L/1/ – Kevin B Jan 09 '14 at 23:44
  • Yeah, I'm going to remove the clone. But it messes with the code. How do I correctly do that? – Mark Kennedy Jan 09 '14 at 23:46
  • it doesn't seem to mess with it in my fiddle – Kevin B Jan 09 '14 at 23:47
  • Ok, I've got it removed. The ONLY issue left is searching is still kind of slow. There is a 3-5 second lag. How can we make this faster? Is it a code limitation? – Mark Kennedy Jan 09 '14 at 23:48
  • If you optimize the filter function to this: `return this.value.toLowerCase().indexOf(str) != -1` it's a little better, but i think that's about as good as you're going to get until you replace the filter method – Kevin B Jan 09 '14 at 23:48
  • Another small change makes it a tiny bit faster, but still too slow. `$el.detach().empty().append(newOptions).appendTo("body");` http://jsfiddle.net/qYe8L/2/ going to have to start cutting out jquery methods – Kevin B Jan 09 '14 at 23:50
  • is jQuery itself slow? Should I port everything to JavaScript to make it faster? – Mark Kennedy Jan 09 '14 at 23:53
  • jquery, just like any additional function, is going to be slower than doing it without jquery, even if only because of it being less function calls. – Kevin B Jan 09 '14 at 23:54
  • Here, i've narrowed down what's taking so long: http://jsfiddle.net/qYe8L/3/ (requires a browser console that supports time and timeend) the filter looks fine, what's taking so long at this point is the empty/append. – Kevin B Jan 09 '14 at 23:57
  • And here it is with that trouble spot not using jquery: http://jsfiddle.net/qYe8L/4/ much better? it's still going to be unbearably slow in IE though. – Kevin B Jan 10 '14 at 00:11

0 Answers0