0

クライアント側の VBScript を使用する古いクラシック ASP アプリケーションを、jQuery を使用する最新のフレームワークにアップグレードしています。この例では、IE8 での jQuery の置き換えは、以前の VBScript よりも著しく遅くなります。これが私が置き換えているスクリプトです：

Function Find()
  name = Ucase(MyForm.SearchBox.value)
  For x = 0 to MyForm.ComboBox.Length - 1
    If Ucase(Left(MyForm.ComboBox.options(x).text,len(name)))=name Then
      MyForm.ComboBox.options(x).Selected = True
      Exit Function
    End If
  Next
End Function

これが私の交換です：

var text = $('#SearchBox').val();
$('#ComboBox option').each(function () {
  if ($(this).text().toUpperCase().indexOf(text.toUpperCase()) == 0) {
    $(this).prop('selected', true);
    return false;
  }
});

VBScript の実行に遅延やフリーズはまったくありません。ユーザーは好きなだけ速く入力でき、検索は追いつきます。同じマシン上で同じデータを使用すると、jQuery ソリューションではテキストへの応答が非常に遅くなります。検索が行われている間、キーボード入力がフリーズしているように見えます。

要素は、約 3,500の要素をComboBox持つ HTMLです。このメソッドは、検索ボックスのイベントで起動しています。selectoptionkeyup

この jQuery を古い VBScript と同じくらい速く実行するには、どのような最適化を行うことができますか?

4

2 に答える 2

0

ソートされたオプションにバイナリ検索を実装することになりました。このタイプの検索では、jQuery エンジンは IE8 と比較して VBScript エンジンよりも効率的ではないと思います。

var searchFoo = function(text) {
    var searchFor = text.toUpperCase();
    var options = $('#ComboBox > option');

    var low = 0;
    var mid;
    var high = options.length - 1;
    var target;

    while (low <= high) {
        mid = Math.ceil(low + (high - low) / 2);
        target =
          options.eq(mid).text().toUpperCase().substring(0, searchFor.length);

        if (searchFor < target) {
            high = mid - 1;
        } else if (searchFor > target) {
            low = mid + 1;
        } else {
            // We found an option that matches. We want the *first* option that
            // matches, so search up through the array while they still match.
            while (mid > 0) {
                target =
                  options.eq(mid - 1).text().toUpperCase()
                         .substring(0, searchFor.length);
                if (searchFor == target) {
                    mid--;
                } else {
                    return options.eq(mid);
                }
            }
            return options.eq(mid);
        }
    }

    return null;
}
于 2012-09-24T16:37:45.130 に答える
0

ほら、次の行を使用すると、速度が向上するはずです。

var t = $('#SearchBox').val().toUpperCase();

$('#ComboBox > option[value="' + t + '"]').attr('selected', true);

この結果を得るためにコードをテストするときの jsFiddle は次のとおりです。

http://jsfiddle.net/YE3wG/

于 2012-09-18T14:49:29.483 に答える