Question

Is it possible to optimize this code? I have very low performance on this keyup event.

$('#opis').keyup(function () {

  if ($('#opis').val() != "") {
    var search = $.grep(
    svgs, function (value) {
      reg = new RegExp('^' + $('#opis').val(), 'i');
      return value.match(reg) == null;
    }, true);
    $('#file_list').html("");
    var tohtml = "";

    $cnt = 0;
    for (var i = 0; i < search.length; i++) {
      if ($cnt <= 30) {
        tohtml += "<li class='file_item'><a href='' class='preview'>" + search[i] + "</a> <a href='" + search[i] + "' class='print_file'><img src='img/add16px.png' alt='dodaj'/></li></a>";
        $cnt++;
      } else {
        break;
      }
    }

    $('#file_list').html(tohtml);
    $(".preview").click(function () {
      $('#file_preview').html('<embed src="opisy/' + $(this).html() + '" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" /> ');
      $(".preview").parent().removeClass("selected");
      $(this).parent().addClass("selected");
      return false;
    });

    $(".print_file").click(function () {
      if (jQuery.inArray($(this).attr('href'), prints) == -1) {
        $('#print_list').append('<li>' + $(this).attr('href') + '</li>');
        prints.push($(this).attr('href'));
      } else {
        alert("Plik znajduje się już na liście do wydruku!");
      }
      return false;
    });
  } else {
    $('#file_list').html("  &nbsp;");
  }
});

Answer 1

var opis = $('#opis')[0]; // this line can go outside of keyup  
var search = [];
var re = new RegExp('^' + opis.value, 'i');
for (var i = 0, len = svgs.length; i < len; i++) {
    if (re.test(svgs[i])) {
        search.push(svgs[i]);
    }
}

It’s up to 100x faster in Google Chrome, 60x in IE 6.