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

ダイアログが表示された後、1回のキーアップでイベントが複数回トリガーされますか？

$('#myModal').on('hidden', function () {
  $('#myModal').find(".modal-body").find("input[type='text']").off("change keyup");
});
于 2012-04-23T19:14:45.767 に答える