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.
- Registering your own handlers when Items in the SearchResults are Selected.
- 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
}