0

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

SELECT 显示在模式对话框（引导程序）中，所以我有以下代码：

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

谁能阐明我的性能问题可能在哪里以及如何解决？

4

1 回答 1

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");
});
于 2012-04-23T19:14:45.767 回答