Adding scrolling to the ScriptAculoUs autocomplete web control

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:

   UL.autocomplete 
   {
       height: 10em;
       overflow:auto;
   }
   

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") : 
             Element.removeClassName(this.getEntry(i),"selected");        
           if (this.index == i) {
             var element = this.getEntry(i);
             element.scrollIntoView(false);
           }
         }        
         if(this.hasFocus) { 
           this.show();
           this.active = true;
         }
       } else {
         this.active = false;
         this.hide();
       }
     },