CODEWITHSUNDEEP
javascriptjquery
Chris Burdon
Chris Burdon

Reputation: 43

Improving the performance of JQuery find

I have adapted the following code from a tutorial to filter li elements based upon their contents: 

$('#_selectSearch_' + index).keyup(function() {
       var filter = $(this).val();
       if(filter) {
          $('#_selectDrop_' + index).find("li:not(:contains(" + filter + "))").slideUp();
          $('#_selectDrop_' + index).find("li:contains(" + filter + ")").slideDown();
       } else {
          $('#_selectDrop_' + index).find("li").slideDown();
       }
    });

The code works just fine but when working with large lists is very slow bringing the browser to a grinding halt for seconds with every key-press. I have been looking around and have come to the conclusion that the way to improve this is to somehow cache the list and not operate directly on the DOM but have no idea how to implement this.

Upvotes: 3

Views: 128

Answers (5)

Bruno
Bruno

Reputation: 5822

If your main concern is performance the following code:

  1. caches element containing filter string.
  2. caches li elements.
  3. doesn't show or hide elements that are already in that state.
  4. uses indexOf which is very fast.
  5. if the user types letters under 500 milliseconds apart the showMatches will not run.
var selectSearch = $("#_selectSearch_" + index );
var li = $("#_selectDrop_" + index + " li");
var currentTimeout;

selectSearch.on( "keyup", function( ) {
    if( currentTimeout ) { window.clearTimeout( currentTimeout ) };
    currentTimeout = setTimeout( showMatches, 500 );

});

function showMatches( ) {
    var txt = selectSearch.val();

    for( var i = 0, len = li.length; i < len; i++ ) {

        var content = li[i].textContent ? li[i].textContent : li[i].innerText;

        if( txt && content.indexOf( txt ) > -1) {
            if( li[i].style.display !== "block" ) {
                li[i].style.display = "block";
            }
        } else {
            if( li[i].style.display !== "none" ) {
                li[i].style.display = "none";
            }
        }
    }
}

Fiddle with 400 li elements here

Upvotes: 1

adeneo
adeneo

Reputation: 318182

I'll give it a go with a somewhat modified (and untested) version: 

$('#_selectSearch_' + index).on('keyup', function() {
    var filter = this.value,
        lis = document.getElementById('_selectDrop_' + index).getElementsByTagName('li'),
        len = lis.length,
        sup = 'textContent' in this;
    if (filter.length) {
        for (var i = len; i--) {
            var text = sup ? lis[i].textContent : lis[i].innerText;
            $(lis[i])[text.indexOf(filter) != -1 ? 'slideDown' : 'slideUp']();
        }
    } else {
        $(lis).slideDown();
    }
});​

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55740

You can cache this element $('#_selectDrop_' + index + ' li');

$('#_selectSearch_' + index).keyup(function() {
    var $li = $('#_selectDrop_' + index + ' li');
    var filter = $(this).val();
    if (filter) {
        $li.not(":contains(" + filter + ")").slideUp();
        $li.contains(filter).slideDown();
    } else {
        $li.slideDown();
    }
});​

Upvotes: 1

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

Reputation: 66961

$('#_selectSearch_' + index).keyup(function() {

   var filter = $(this).val();

   // by combining and cacheing all the way to the li
   // we save a lot of time, since it seems that's where you are doing
   // all your searching from

   var selectDrop = $('#_selectDrop_' + index + ' li');

   if (filter) {
      selectDrop.not(':contains("' + filter + '")').slideUp();
      selectDrop.contains(filter).slideDown();
   } 
   else {
      selectDrop.slideDown();
   }
});

Upvotes: 0

Matheus Azevedo
Matheus Azevedo

Reputation: 898

drop = $('#_selectDrop_' + index + ' li');
$('#_selectSearch_' + index).keyup(function() {
   var filter = $(this).val();
   if(filter) {
      drop.find(":not(:contains(" + filter + "))").slideUp();
      drop.find(":contains(" + filter + ")").slideDown();
   } else {
      drop.slideDown();
   }
});

Drop will be cached just once, and then will be used at every keyup. Also this uses the minimum possible of find

Upvotes: 0

Related Questions