通過選擇元素選項加速jQuery搜索

我正在使用客戶端VBScript將舊的經典ASP應用程序升級到使用jQuery的更現代的框架。在這種情況下，我的jQuery替換在IE8中運行速度明顯慢於以前的VBScript。這裏是我更換的腳本：通過選擇元素選項加速jQuery搜索

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元素是一個帶有約3,500 option元素的HTML select。此方法正在搜索框的keyup事件中觸發。

我可以做些什麼優化讓jQuery像舊VBScript一樣快？

來源

2012-09-18 Dave Mateer

建議之一是宣佈'變量$此= $（本）;'和使用'$ this'variable而不是使用'$（本）'多次，這將使jQuery的搜索每次對象。但我不確定在這種情況下它對你有多大幫助！ – BlackCursor

我最終在排序的選項上實現二分搜索。我猜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-24 16:37:45

在這裏你去，以這條線應該加快速度：

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

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

這裏是我的jsfiddle檢驗出來時，我的代碼來獲得這個結果：

http://jsfiddle.net/YE3wG/

來源

2012-09-18 14:49:29

在循環外部獲取大寫搜索值是一個很好的優化;謝謝！但是，除非我錯過了一些東西，否則你的測試是不一樣的。我在做一個不區分大小寫的「開始於」與每個選項的文本進行比較。 –

哦，當然，你100％正確 - 在我的解決方案中完全忘記了這一點。在那種情況下，我可以最優化你的代碼是我的jsFiddle中註釋掉的解決方案。 –

此外，請記住選擇器中將保存處理的「>」。而且，元素名稱越短（不止一次使用）越快，它將用於3500元素循環，比如make var t = $（this）.text（）; etc. –

通過選擇元素選項加速jQuery搜索

回答

相關問題