Question

A while back I found some code that allows you to filter the contents of a SELECT by typing in a text element. It works well however, over time the performance degrades pretty badly. I’m not sure if it is the filter code or the way in which I am activating it.

The SELECT shows up in a modal dialog (bootstrap) so I have the following code:

$('#myModal').on('shown', function () {
  $(".focusable").val("").focus();
  var select = $('#myModal').find(".modal-body").find("select");
  var text = $('#myModal').find(".modal-body").find("input[type='text']");
  select.filterByText(text, true);
});

And here is the filter code:

jQuery.fn.filterByText = function (textbox, selectSingleMatch) {
  return this.each(function () {
    var select = this;
    var options = [];
    $(select).find('option').each(function () {
      options.push({value:$(this).val(), text:$(this).text(), data:$(this).data("short-name")});
    });
    $(select).data('options', options);
    $(textbox).bind('change keyup', function () {
      var options = $(select).empty().data('options');
      var search = $.trim($(this).val());
      var regex = new RegExp(search, 'gi');

      $.each(options, function (i) {
        var option = options[i];
        if (option.text.match(regex) !== null) {
          var copyOption = $('<option>').text(option.text).val(option.value);
          copyOption.data("short-name", option.data);
          $(select).append(copyOption);
        }
      });
      if (selectSingleMatch === true &&
          $(select).children().length === 1) {
        $(select).children().get(0).selected = true;
      }
    });
  });
};

Can anyone shed some light on where my performance issue(s) might be and how to solve it?

Answer 1

reading through the comments I would suggest to add the following:

$(textbox).bind('change keyup', function(event) {
  console.log(event);
  // your code
});

Is the event triggered more than once on a single keyup after some times the dialog is shown?

$('#myModal').on('hidden', function () {
  $('#myModal').find(".modal-body").find("input[type='text']").off("change keyup");
});