How to add content at the end of an AutoCompleteExtender dropdown

Somebody asked me how to add things at the end of an AutoCompleteExtender div, something like a link. I thought it would be pretty easy, all I would have to do is catch the display function and add a little thing in the container. Well, it was that simple, but also complicated, because the onmousedown handler for the dropdown is on the entire div, not on the specific items. The link was easy to add, but there was no way to actually click on it!

Here is my solution:

function addLink(sender,args) {
    var div=sender.get_completionList();
    if (div) {
        var newDiv=document.createElement('div');
        newDiv.appendChild(getLink());
        div.appendChild(newDiv);
    }
}

function getLink() {
    var link=document.createElement('a');
    link.href='#';
    link.innerHTML='Click me for popup!'
    link.commandName='AutoCompleteLinkClick';
    return link;
}

function linkClicked() {
    alert('Popsicle!');
}

function ACitemSelected(sender,args) {
    var commandName=args.get_item().commandName;
    if (commandName=='AutoCompleteLinkClick') linkClicked();
}

The AutoCompleteExtender must have the two main functions as handlers for the item selected and popup shown set like this:

<ajaxControlToolkit:AutoCompleteExtender OnClientItemSelected="ACitemSelected" OnClientShown="addLink" ...>

Now, the explaining.

First we hook on OnClientShown and add our link. The link is added inside a div, because else it would have been shown as a list item (with highlight on mouse over). I also added a custom attribute to the link: commandName.

Second we hook on OnClientItemSelected and check if the selected item has a commandName attribute, and then we execute stuff depending on it.

That's it folks!