July 5, 2006

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:
        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) { 
            this.active = true;
        } else {
          this.active = false;
That does it. Works fine in both IE and FF.