HowTo : Customize Rendering of AutoCompleteExtender 1

HowTo : Customize Rendering of AutoCompleteExtender 1

  • Comments 6

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
}
Leave a Comment
  • Please add 4 and 7 and type the answer here:
  • Post
  • You've been kicked (a good thing) - Trackback from DotNetKicks.com

  • I'd like to fire the auto-complete popup show logic from JavaScript.  I've tried:

    AjaxControlToolkit.AutoCompleteBehavior._timer.set_enabled(true);

    and changing the text box's text then changing it back.

    It seems to work nicely, as long as the pop-up list hasn't been shown previously.  If the pop-up was shown already, it happily does nothing.

    How do I fire the "show me the money" mechanism from JavaScript?

  • 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 .

  • 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

  • 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.

  • 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?

Page 1 of 1 (6 items)