HowTo : Customize Rendering of AutoCompleteExtender 1

Registering your own handlers when Items in the SearchResults are Selected

Hi,

Quite a few people have a list of changes that they want made to the AutoCompleteExtender , and the asp.net Ajax Team is working quite dilligently to solving most of these

in the next toolkit release .

I will tackle a few of the issues for those who dont want to wait until the next toolkit release.

1. Registering your own handlers when Items in the SearchResults are Selected.
2. Specifying your own template for how the data should be displayed.

We will discusss Point #2 in My Next  Blog post .

We will achieve these functionalities by modifying the source of the AjaxControlToolkit for the File "AutoCompleteBehavior.js".

1.Registering your own handlers when Items in the SearchResults are Selected.

To achieve this , we will have to add/modify certain scripts.

 Lets look at the changes now .

1. Add a member to the class called "customClickHandler" , which will store the Event handler to be called when an item in the list is selected.

 AjaxControlToolkit.AutoCompleteBehavior.initializeBase(this, [element]);
Blah , blah , blah , existing declarations
this._customClickHandler = null;
}

2. Provide a way for Users to specify the Eventhandler , add a function called "set_ClickCallBack".

 AjaxControlToolkit.AutoCompleteBehavior.prototype = {
blah,blah, existing functions
set_ClickCallBack:function(evthandler){
    this._customClickHandler = Function.createDelegate(this, evthandler);
   }
}

3.Wherever the  extender's Default onclick hanlder is called, replace with this handler.

_onListMouseDown

 _onListMouseDown: function(ev) {
   if (ev.target !== this._completionListElement) {
       if( this._customClickHandler != null ){
             this._customClickHandler( ev.target );
       }
       else{
           this._setText(ev.target.firstChild.nodeValue);
           }
       }
   },

_onKeyDown

 _onKeyDown: function(ev) {
        var k = ev.keyCode ? ev.keyCode : ev.rawEvent.keyCode;
        if (k === Sys.UI.Key.esc) {
            this._hideCompletionList();
            ev.preventDefault();
        }
        else if (k === Sys.UI.Key.up) {
            if (this._selectIndex > 0) {
                this._selectIndex--;
                this._highlightItem(this._completionListElement.childNodes[this._selectIndex]);
                ev.preventDefault();
            }
        }
        else if (k === Sys.UI.Key.down) {
            if (this._selectIndex < (this._completionListElement.childNodes.length - 1)) {
                this._selectIndex++;
                this._highlightItem(this._completionListElement.childNodes[this._selectIndex]);
                ev.preventDefault();
            }
        }
        else if (k === Sys.UI.Key.enter) {
            if (this._selectIndex !== -1) {
            //Call Custom Click Handler if registered
            if( this._customClickHandler == null ){
                this._setText(this._completionListElement.childNodes[this._selectIndex].firstChild.nodeValue);}
                else {
                this._customClickHandler( this._completionListElement );
                }
                
                ev.preventDefault();
            }
        }
        
        if (k !== Sys.UI.Key.tab) {
            this._timer.set_enabled(true);
        }
    },

How do you use this after modification in your applications ?

If the behaviorID of the AutoCompleteExtender is "customAutoComplete".

The Code to hookup the Custom Click handler is :

 function  pageLoad(){
$find("customAutoComplete").set_ClickCallBack( customClickhandler ); 
}

customClickHandler is a javascript Function .

 function customClickhandler( clickedElement ){
//Your Code here
}