Question

前段时间我发现了一些代码，允许您通过键入文本元素来过滤SELECT的内容。然而，它运行良好，随着时间的推移性能下降得非常糟糕。我不确定它是过滤器代码还是我激活它的方式。

SELECT显示在一个模态对话框（bootstrap）中，所以我有以下代码：

$('#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);
});

以下是过滤器代码：

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;
      }
    });
  });
};

任何人都可以了解我的性能问题可能是什么以及如何解决它？

Answer 1

通过评论阅读我建议添加以下内容：

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

在显示对话框几次后，是否在一个键盘上触发了多次事件？

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

如何通过文本修复过滤器的不良性能

1 个答案: