Question

我正在使用客户端VBScript将旧的经典ASP应用程序升级到使用jQuery的更现代的框架。在这个例子中，我的jQuery替换在IE8中的运行速度明显慢于之前的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解决方案对文本的响应非常明显;看起来键盘条目在搜索发生时被冻结。

ComboBox元素是一个HTML select，包含大约3,500个option个元素。此方法在搜索框的keyup事件上触发。

我可以进行哪些优化，以便此jQuery的运行速度与旧的VBScript一样快？

Answer 1

在这里，使用这一行，它应该加快速度：

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

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

在测试我的代码以获得此结果时，这是我的jsFiddle：

http://jsfiddle.net/YE3wG/

Answer 2

我最终在排序选项上实现二进制搜索。我想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;
}

加快jQuery搜索选择元素选项

2 个答案: