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.
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 }
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)
//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?