Hi,

I've just started using ASP.NET AJAX and the toolkit. As always, I tend to tweak things to my liking, and when doing so I like to be able to contribute back to the community. I'm not quite sure of how to best contribute, but after writing to ajaxtk@ms.com, it was suggested that I post my change here.

Anyway, I was really bothered that when I wanted to style the AutoCompleteExtender div using the CompletionListElementID and a CSS rule, I couldn't affect the currently selected item separately, which gave some really odd effects, so I wrote some code to allow separate CSS rules for unselected and selected items. Unselected items will belong to the CSS class "listitem" and selected items to "selectedlistitem". It's preferable to combine this with the selector for the CompletionsListElementID id.

I couldn't attach files here, so I'm including a unified diff to the toolkit files inline below:

--- C:/Temp/AjaxControlToolkit/AjaxControlToolkit/AutoComplete/AutoCompleteBehavior.js	Thu Feb 01 14:41:00 2007
+++ C:/Program Files/Microsoft ASP.NET/AjaxControlToolkit/AjaxControlToolkit/AutoComplete/AutoCompleteBehavior.js	Thu Feb 08 20:06:40 2007
@@ -204,6 +204,7 @@
             if (child !== item) {
                 child.style.backgroundColor = this._textBackground;
                 child.style.color = this._textColor;
+                child.className = "listitem";
             }
         }
 
@@ -221,6 +222,7 @@
             item.style.color = 'highlighttext';
 
         }
+        item.className = "selectedlistitem";
     },
     
     _onListMouseDown: function(ev) {
@@ -350,6 +352,7 @@
                 itemElementStyle.textOverflow = 'ellipsis';
                 itemElementStyle.backgroundColor = this._textBackground;
                 itemElementStyle.color = this._textColor;
+                itemElement.className = "listitem";
                 
                 this._completionListElement.appendChild(itemElement);
             }

Below is the ASP and CSS code for this to work.

ASP:

<div>
    <asp:TextBox ID="TextBox1" Width="300" runat="server" autocomplete="off" />
    <ajaxToolkit:AutoCompleteExtender id="AutoCompleteExtender1" runat="server"
        TargetControlID="TextBox1"
        ServicePath="CompletionService.asmx" 
        ServiceMethod="GetCompletionList"
        MinimumPrefixLength="1" 
        CompletionInterval="1"
        EnableCaching="true"
        CompletionSetCount="12"
        CompletionListElementID="CompList" />
</div>
<div id="CompList"></div>

CSS:

 
<style type="text/css">
#CompList div
{
    font-family: arial, verdana, times;
    font-size: 11px;
}

#CompList div.listitem
{
    background-color: #e3f3ff !important;
}

#CompList div.selectedlistitem
{
    background-color: Red !important;
    color: White !important;
}

I hope this code helps someone!

Work item http://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=8240 tracks this. We would like to be able to change autocomplete flyout styles easily not just for cool customization but for accessibility purposes as well.