Question

I’m upgrading an old classic ASP application using client-side VBScript to a more modern framework using jQuery. In this instance, my jQuery replacement is noticeably slower running in IE8 than the previous VBScript. Here is the script I am replacing:

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 

Here is my replacement:

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

There is no delay / freeze at all running the VBScript. The user can type as fast as he wants and the search keeps up. On the same machine, with the same data, the jQuery solution has a very noticeable delay responding to text; it appears like the keyboard entry is frozen while the search is happening.

The ComboBox element is an HTML select with about 3,500 option elements. This method is firing on the keyup event of the search box.

What optimizations can I make so that this jQuery runs as fast as the old VBScript?

Answer 1

I ended up implementing a binary search on the sorted options. I guess the jQuery engine is just not as efficient on IE8 vs. the VBScript engine on this type of search.

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