With Great Power comes Great Response.write("Ability") : AutoCompleteExtender

How to : Use a Key Value Pair in your AutoCompleteExtender ( updated again... )

PhaniRajuYN — Tue, 19 Jun 2007 16:50:00 GMT

Hi all,

This has come up time and again on the asp.net Ajax forums and has become the Top Voted issue for the AutoCompleteExtender Work Items . I had some time the other day and set upon to write a fix for this .

How do you use it?

1) Attach a handler to the itemSelected Event using the OnClientItemSelected property in the ACE markup

<ajaxToolkit:AutoCompleteExtender runat="server" 
            BehaviorID="AutoCompleteEx" ID="autoComplete1"
            TargetControlID="myTextBox" ServicePath="~/Services/AutoComplete.asmx"               
            ServiceMethod="GetCompletionListKeyValuePair"
            ......
            OnClientItemSelected ="IAmSelected"
        >
</ajaxToolkit:AutoCompleteExtender>

function IAmSelected( source, eventArgs ) {
   alert( " Key : "+ eventArgs.get_text() +"  Value :  "+eventArgs.get_value()); 
}

2) The Server-Side Method :

The Server-Side Method will return an array of strings as before ,

You create KeyValue Pairs by calling the method :

AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(<key>,<value>);

EX:

[WebMethod]

        public string[] GetCompletionList(string prefixText, int count)
        {

            if (count == 0)
            {

                count = 10;

            }

            if (prefixText.Equals("xyz"))
            {

                return new string[0];

            }

            Random random = new Random();

            List<string> items = new List<string>(count);

            for (int i = 0; i < count; i++)
            {

                char c1 = (char)random.Next(65, 90);

                char c2 = (char)random.Next(97, 122);

                char c3 = (char)random.Next(97, 122);

                items.Add(AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(prefixText + c1 + c2 + c3, i.ToString()));

            }

            return items.ToArray();

        }

The Display of the ACE does not change , it still remains the same :

Once you select an item from the DropDown of the ACE , you get an alert which shows you the value of the selectedItem.

In Your applications , instead of the Alert , process some business logic as per your requirements.

Hope this is an useful Addition.

Download the Latest AjaxControlToolkit from :

http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=4941

[Update ]

You don't need to specify the UseKeyValuepairs attibute anymore ( in fact , its been removed :) ).

The ACE script is intelligent enough to realize when Key/Value pairs are returned automatically.

And also , the method CreateKeyvaluePair has been changed to CreateAutoCompleteItem.

My Update to the AutoCompleteExtender

PhaniRajuYN — Fri, 25 May 2007 00:48:00 GMT

HI ,

I was asked to work on the beta AjaxControlToolkit Patch Utility Tool from the Asp.Net AjaxControlToolkit Forums .

My first fix , which allows the first result in a result set to be automatically selected ( if chosen to ) , has been made part of the codebase

and will be in the next release of the Toolkit .

Youc an see me in the Hall of Fame .

Default Behavior , With "FirstRowSelected" set to false.

Behavior after My patch is part of the AjaxCotnrolToolkit , With "FirstRowSelected" set to true.

Link to the WorkItem my fix resolves Be able to have the first row selected Title is required.

Hope this helps !!!

Some Useful Links from the ASP.NET Ajax Forums

PhaniRajuYN — Thu, 10 May 2007 23:50:39 GMT

Hi ,

Over the past couple of months, I have been actively contributing to the Asp.net Ajax forums and have come across some very

weird and challenging problems to solve.Anyone who's been at the forums can tell, the community is VERY Active and helpful when it comes to helping

out your fellow developer . Below is a list of some FAQs that I often encountered and was able to address on the Forums .

Helping someone out with a brain-bender they are stuck on and seeing the issue resolved after some brainstorming is VERY satisfying.

Why am I doing this ?

There is a lot of content on the Forums and I wanna share what I learnt and was able to share with my fellow devs.

Also, I could have blogged about this but felt that its better to point you guys to the place where we learnt about this .

You might find some content duplicated from my Blog , as far as possible I have tried to avoid that and give you guys the unique ones that I have seen.

As time goes by , I will be putting up another list of issues that I helped on ,

these are the unique ( sort-of ) ones that I could find out of all the ones that I answered .

If you are not a part of the Forums , get yourself an account and start helping out !

Hope this helps someone out there !

HowTo : Customize Rendering of AutoCompleteExtender 1

PhaniRajuYN — Mon, 09 Apr 2007 19:16:34 GMT

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
}

Change ServiceMethods and Web Service for the AutoCompleteExtender From Client Side

PhaniRajuYN — Fri, 16 Feb 2007 07:25:00 GMT

This is quite a common requirement and guess the Docs are not really clear as to how you can achieve this .

Lemme see how I can help

You want to change the Webmethod that the AutoComplete Extender Talks to from the Client Side.
You want to change the WebService that the AutoComplete Extender Talks to from the Client Side.

You can achieve this easily using the Functions Provided by the Extenders on the Client Side.

Follow these Simple Steps.

1) Assign a BehaviourID to the AutoCompleteExtender.

<cc1:AutoCompleteExtender 
               ID="AutoCompleteImagesExtender1" runat="server" TargetControlID="myTextBox"
                ServicePath="AutoComplete.asmx" ServiceMethod="GetCompletionList" MinimumPrefixLength="2"
                CompletionInterval="1000" EnableCaching="true" 
                CompletionListElementID="divCompletionImages"
                CompletionSetCount="12" 
                BehaviorID="autoCompleteExtender">
</cc1:AutoCompleteExtender>

2) You can change the Web Service that the AutoCompleteExtender Talks to by using the Following JavaScript.

function ChangeServicePath(){
        var autoComplete = $find("autoCompleteExtender");
        autoComplete.set_servicePath( <NewServicePath>);
        }

As you can see the $find  method is called on the behaviourID of the AutoCompleteExtender.

The "set_servicePath" method allows you to Set the path to the Web Service that the Extender talks to .

3) You can change the Web Service that the AutoCompleteExtender Talks to by using the Following JavaScript.

function ChangeServiceMethod(){
        var autoComplete = $find("autoCompleteExtender");
        autoComplete.set_serviceMethod( <NewServiceMethodName>);
        }

The "set_serviceMethod" method allows you to Set the path to the Web Service that the Extender talks to .

Hope this Helps

Customizing the MS Ajax AutoCompleteExtender To Render Images Instead Of Text

PhaniRajuYN — Sat, 10 Feb 2007 13:13:49 GMT

We all know about the AutoComplete Extender from MS AJAX.

It looks like this .....

I want to customize the Auto Complete behaviour to render images on the client side rather than the text nodes .

My Server Side WebService returns an array of image URLs. I want to change the way the Results are rendered.

This is how I want it to look.

I know that its pretty easy to achieve the effect using the client side proxy generated for a webservice.

But, I need to leverage the advantages of the AJAX AutoComplete control such as

Client Side Caching of Web Service Results
Fully customisable with regard to specifying when and how the server side method call is made .

So, we download the Source code of the AutoComplete Extender and start our process of hacking through it to achieve what we want.

You can download the Source of the AjaxControlToolkit from Here

Once we downloaded , we take a look at the function that renders the Search Results.

The Function inside the AutoComplete Extender that renders the search results is in Javascript.

The File you gotta go to is AutoCompleteBehavior.js.

_update: function(prefixText, completionItems, cacheResults) {
        if (cacheResults && this.get_enableCaching()) {
            if (!this._cache) {
                this._cache = {};
            }
            this._cache[prefixText] = completionItems;
        }

        this._completionListElement.innerHTML = '';
        this._selectIndex = -1;
        if (completionItems && completionItems.length) {
            for (var i = 0; i < completionItems.length; i++) {
                var itemElement = document.createElement('div');
                itemElement.appendChild(document.createTextNode(completionItems[i]));
                itemElement.__item = '';
                
                var itemElementStyle = itemElement.style;
                itemElementStyle.padding = '1px';
                itemElementStyle.textAlign = 'left';
                itemElementStyle.textOverflow = 'ellipsis';
                itemElementStyle.backgroundColor = this._textBackground;
                itemElementStyle.color = this._textColor;
                
                this._completionListElement.appendChild(itemElement);
            }
            var elementBounds = CommonToolkitScripts.getBounds(this.get_element());        
            this._completionListElement.style.width = Math.max(1, elementBounds.width - 2) + 'px';
            this._popupBehavior.show();
        }
        else {
            this._popupBehavior.hide();
        }
    }

</Function>

The Lines of the function that Renders the Search Results is marked in this color.

Lets study these lines

var itemElement = document.createElement('div');
    itemElement.appendChild(document.createTextNode(completionItems[i]));
    itemElement.__item = '';

These lines of code create a "DIV" for each search result from the Web service.

We will change it to be ...

var itemElement = document.createElement('img');
itemElement.src =  completionItems[i];

This would be enough to render images instead of Text .

Next, onClick of the image thumbnail , we want to assign the image url to another full image on the page.

The function  called when the image is clicked is

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

We will change this to be :

 _onListMouseDown: function(ev) {
        $get("imgFullBlown").src = event.srcElement.src;
        },

imgFullBlown is gonna be an <IMG> tag on the page that hosts the control .

As you can see, the src of the image that is clicked is assigned to the src of the "imgFullBlown" tag.

The Effects are as shown below .

There you go , build the Project and change the default behaviour or build your own control by extending the AutoCompleteExtender.

You are  only limited by your imagination.

Everyone has access to the source of some of our best controls.