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


Hi all,

This has come up time and again on the 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"               
            OnClientItemSelected ="IAmSelected"
 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 :




        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 :


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