Adding scrolling to the ScriptAculoUs autocomplete web control

| 4 Comments | No TrackBacks

ScriptAculoUs autocomplete web control from SimoneB is a nice lightweight easy to use ASP.NET autocomplete textbox control with many virtues. The only problem I had with it was that dropdown autocomplete list has no scrolling and so long autocomplete lists look ugly. Happily it comes with sources so I hacked it to add scrolling, here is the solution in case somebody needs it.

  1. In Suggestion.cs add a CSS class to the UL tag generated for an autocomplete list:
    StringBuilder returnValue = new StringBuilder("<ul class=\"autocomplete\">");
  2. In a stylesheet constrain autocomplete list height and enable scrolling on overflow:
        height: 10em;
  3. In controls.js, modify "render" function to make autocomplete list automatically scrolling so a selected item is always visible:
      render: function() {
        if(this.entryCount > 0) {
          for (var i = 0; i < this.entryCount; i++) {
            this.index==i ? 
              Element.addClassName(this.getEntry(i),"selected") : 
            if (this.index == i) {
              var element = this.getEntry(i);
          if(this.hasFocus) { 
   = true;
        } else {
 = false;
That does it. Works fine in both IE and FF.

Related Blog Posts

No TrackBacks

TrackBack URL:


Thanks for the code and I think it would be helpful to mark the curly brackets of 'for' loop with blue as they don't appear in the original code.

David, wouldn't it be fair to ask before publishing someone else's work on your website?
Btw I didn't include any external css because I embedded it in the code, and customized the css class name so that it applies only to the autocomplete control and not to other unordered lists which eventually have a css class name called "autocomplete".

Hi Oleg, I have already included your solution into the control. Thanks again. Can I just ask you to change the url that points to my blog post since I switched to DotNetSlackers? The new post url is:


Hey Oleg,

Very cool! I've added it as a vendor project into the repository >

It seems SimoneB beat me to the punch, and added this to the downloadable source base, but I did add a style.css file into a Resources folder as I couldn't find a default CSS file anywhere.

Thanks for the link and code!

Leave a comment