The Problem

One of the projects I’m working on is using a lot of client-side functionality — such that we’re mixing and matching libraries to achieve the functionality that we need. I explain this to defend the fact that we’re still using Scriptaculous’ autocompleter in the first place — whereas the rest of the client-side is build in jQuery and jQueryUI. For our purposes it just seems that the Scriptaculous autocompleter is easier to use with autocomplete lists produced by ajax on the fly, via DWR. Please correct me if I’m wrong about this, because I’d love to switch over to the jQueryUI autocompleter altogether. However, it just doesn’t seem to be as good a fit.

Here’s how we’re handling the autocompleter with Scriptaculous and DWR:

new Autocompleter.DWR('searchStringField', 'idToBeFilledWithSuggestions', updateFunction,{ valueSelector: nameValueSelector, partialChars: 0 });

That said, there is a functional/end-user problem with Scriptaculous’ autocompleter that you don’t seem to find with jQueryUI’s. Specifically, when you scroll through the autocompleter list with the up and down arrow keys, Scriptaculous’ autocompleter behaves rather annoyingly. Rather than just cycle through the items in place, the entire page “jumps” as you press the keys. For example, when you cycle up with the up arrow key, the page jumps so that the list item is positioned at the top of the browser window. When you cycle down, the opposite happens.

Check out an example that another frustrated developer created here »

Proposed Solutions

With a little research, I tracked down the problem to a few lines of the Scriptaculous file “controls.js”, as documented in this Scriptaculous ticket.

Now, there are a few solutions proposed here.

1. The first is to simply comment out the offending lines of code in the file controls.js.
2. The second is to apply a patch to resolve the issue

Final Resolution

Well, with my limited knowledge of Prototype and Scriptaculous, I simply opted for solution #1 — that is, commenting out the lines of code that seem to produce this undesired behavior. For what it’s worth, I’m using controls.js version 1.8.2, © 2008. So, in my file, the offending lines of code are 216 and 222. Simply commenting these lines out solves this jumping issue completely.

Now, take this solution with a grain of salt. Since I don’t depend heavily on Prototype or Scriptaculous throughout the rest of this project, I have no problem removing this functionality from the core completely. However, if you rely on lots of Scriptaculous functionality on your site, this may solve the jumping issue, but break something else. However, for those who are using Scriptaculous exclusively for its autocompleter, I see no real issue (thus far) with solving the problem via this little hack.

Thanks to user Mike Boone for tracking down this issue and finding the offending lines of code.