Share via

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
}

Comments

  • Anonymous
    April 09, 2007
    You've been kicked (a good thing) - Trackback from DotNetKicks.com

  • Anonymous
    May 02, 2007
    The comment has been removed

  • Anonymous
    May 03, 2007
    Hi Rob, Have you tried Setting the "CompletionInterval" Property of the AutoCompleteExtender to a low enough value to trigger the ACE ? Correct me if I am wrong .

  • Anonymous
    May 09, 2007
    Excellent Code!!!!  The Mouse click “_onListMouseDown” works like a charm/perfect. My only addition is when the enter key is pressed “_onKeyDown where keystroke = Sys.UI.Key.enter” does not work with current above example.  

2 Problems found/encountered

  1. On enter key press the wrong object (entire list – not selected item) is sent to the custom function.
  2. The selection list does not hide after enter press.

Solution for problem 1: Replace this._customClickHandler(this._completionListElement); With this this._customClickHandler(this._completionListElement.childNodes[this._selectIndex] ); Solution for problem 2: Option 1 (with out textbox value change): function customClickhandler( clickedElement ) {    $find("customAutoComplete")._hideCompletionList();    } Option 2 (with textbox value/text change) function customClickhandler( clickedElement ) {     //Changes textbox value and closes suggestion DHTML           $find("customAutoCompleteSearch")._setText(clickedElement.innerHTML);    } Thank you for the code. Good luck & have fun

  • Anonymous
    May 11, 2007
    re: Autocomplete popup from Javascript I've set the CompletionInterval to 10, the PrefixLength to -1.  Often it'll pop up the list on the first function run, but if a selection is made or esc is pressed, and the function is run again, the pop-up does not show.

  • Anonymous
    November 15, 2007
    I've tried to implement these changes, but I'm getting a "JScript runtime error: 'null' is null or not an object in the pageLoad() function. What could I be missing?