Fastest way to hide thousands of elements?

Question

I have an autocomplete form where the user can type in a term and it hides all <li> elements that do not contain that term.

I originally looped through all <li> with jQuery's each and applied .hide() to the ones that did not contain the term. This was WAY too slow.

I found that a faster way is to loop through all <li> and apply class .hidden to all that need to be hidden, and then at the end of the loop do $('.hidden').hide(). This feels kind of hackish though.

A potentially faster way might be to rewrite the CSS rule for the .hidden class using document.styleSheets. Can anyone think of an even better way?

EDIT: Let me clarify something that I'm not sure too many people know about. If you alter the DOM in each iteration of a loop, and that alteration causes the page to be redrawn, that is going to be MUCH slower than "preparing" all your alterations and applying them all at once when the loop is finished.

Answer 1

Whenever you're dealing with thousands of items, DOM manipulation will be slow. It's usually not a good idea to loop through many DOM elements and manipulate each element based on that element's characteristics, since that involves numerous calls to DOM methods in each iteration. As you've seen, it's really slow.

A much better approach is to keep your data separate from the DOM. Searching through an array of JS strings is several orders of magnitude faster.

This might mean loading your dataset as a JSON object. If that's not an option, you could loop through the <li>s once (on page load), and copy the data into an array.

Now that your dataset isn't dependent on DOM elements being present, you can simply replace the entire contents of the <ul> using .html() each time the user types. (This is much faster than JS DOM manipulation because the browser can optimize the DOM changes when you simply change the innerHTML.)

var dataset = ['term 1', 'term 2', 'something else', ... ];

$('input').keyup(function() {
    var i, o = '', q = $(this).val();
    for (i = 0; i < dataset.length; i++) {
        if (dataset[i].indexOf(q) >= 0) o+='<li>' + dataset[i] + '</li>';
    }
    $('ul').html(o);
});

As you can see, this is extremely fast.

---

Note, however, that if you up it to 10,000 items, performance begins to suffer on the first few keystrokes. This is more related to the number of results being inserted into the DOM than the raw number of items being searched. (As you type more, and there are fewer results to display, performance is fine – even though it's still searching through all 10,000 items.)

To avoid this, I'd consider capping the number of results displayed to a reasonable number. (1,000 seems as good as any.) This is autocomplete; no one is really looking through all the results – they'll continue typing until the resultset is manageable for a human.

Answer 2

I know this is question is old BUT i'm not satisfied with any of the answers. Currently i'm working on a Youtube project that uses jQuery Selectable list which has around 120.000 items. These lists can be filtered by text and than show the corresponding items. The only acceptable way to hide all not matching elements was to hide the ul element first than hide the li elements and show the list(ul) element again.

Answer 3

You can select all <li>s directly, then filter them: $("li").filter(function(){...}).hide() (see here)

(sorry, I previously posted wrong)

Answer 4

You can use the jQuery contains() selector to find all items in a list with particular text, and then just hide those, like this:

HTML:

 <ul id="myList">
      <li>this</li>
      <li>that</li>
 <ul>​

jQuery

var term = 'this';    
$('li:contains("' + term + '")').hide();​

Answer 5

You could use a more unique technique that uses technically no JavaScript to do the actual hiding, by putting a copy of the data in an attribute, and using a CSS attribute selector.

For example, if the term is secret, and you put a copy of the data in a data-term attribute, you can use the following CSS:

li[data-term*="secret"] {
    display: none;
}

To do this dynamically you would have to add a style to the head in javascript:

function hideTerm(term) {
    css = 'li[data-term*="'+term+'"]{display:none;}'
    style = $('<style type="text/css">').text(css)
    $('head').append(style);
}

If you were to do this you would want to be sure to clean up the style tags as you stop using them.

This would probably be the fastest, as CSS selection is very quick in modern browsers. It would be hard to benchmark so I can't say for sure though.

Answer 6

How about:

<style>
    .hidden{ display: none; }
</style>

That way you don't have to do the extra query using $('.hidden').hide() ?

Answer 7

Instead of redefining the Stylesheets rules, you can directly define 'hide' class property to "display:none;" before hand and in your page, you can just apply the class you defined after verifying the condition through javascript, like below.

$("li").each(function(){if(condition){$(this).addClass('hide');}});

and later, if you want to show those li's again, you can just remove the class like below

$("li").each(function(){if(condition){$(this).removeClass('hide');}});