#98 new
AJ

Autocomplete poor performance on large lists

Reported by AJ | October 1st, 2008 @ 06:10 AM

If the number of matching items is large (say > 500), then autocomplete performance degrades heavily.

  • Generating the list of candidates is extremely slow in IE6 and 7; though I suppose this is an IE performance bug, there might be implementation workarounds.

  • The mouseover code is extremely inefficient, and can cause the browsers to lag for seconds. The code is found in Autocompleter.Base.render(). On a mouseover, the code iterates through all the candidates in the list, setting or removing "selected" from their classnames. This is prohibitively slow as the list gets large. A solution is to replace the code:


for (var i = 0; i < this.entryCount; i++)
  this.index==i ?
     Element.addClassName(this.getEntry(i),"selected") :
     Element.removeClassName(this.getEntry(i),"selected");

with


if (this.selected_item)
   Element.removeClassName(this.getEntry(this.selected_item-1),"selected");
Element.addClassName(this.getEntry(this.index),"selected");
this.selected_item = this.index+1;

(The +1 is to account for a 0 index; you can alternately use Prototype's isUndefined() function to determine if selected_item has been set.)

  • There are other minor improvements that could be made, such as not lowercase()ing the input string for each candidate in Autocompleter.Local.setOptions().

AJ

Comments and changes to this ticket

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours.
<br/><b>Source available from github</b>
The Git repository resides at:
<a href="http://github.com/madrobby/scriptaculous">http://github.com/madrobby/scriptaculous</a>
<br/>Check out the current development trunk with:
<code>git clone git://github.com/madrobby/scriptaculous.git</code>
<br/>As <b>script.aculo.us 1.xx is feature-frozen</b>, this development trunk is for <b>bugfixes only</b>.
<br/>New development should happen only for
<b>script.aculo.us 2</b>.
<br/><b>Creating a bug report</b>
When creating a bug report, be sure to include as much relevant information as possible. Post a an example that shows off the problem. Preferably, <b>alter the unit tests</b> and show through either changed or added tests how the expected behavior is not occuring.

People watching this ticket

Pages