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

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

Rate This
  • Comments 65

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.


Leave a Comment
  • Please add 1 and 3 and type the answer here:
  • Post
  • Hi,

    can see how the patch works but how do I apply it - is there a tool that takes the XML and uses it as a roadmap to update the files.

    Thanks in advance


  • Hi Richard,

    Please refer to Shawn's Blog Post about how to apply the patch.

    Look for the section Named "Applying Fixes (or, what does "Get Change 12345" mean?)"

    Hope this helps.



  • Seems to work ok in internet explorer but not in firefox with the keyvalue pair.

    Any ideas. I get a error in firefox. String contains an invalid character. code '5'.

    At this bit of text in the javascript.

    _createValueNode:function(value) {

           var _valueNode = document.createElement("<input type='hidden'/>");

    I've got a post going at if anyone can shed any light.

  • Hi Raj, this sounds great!

    I've read Shawn's blog post on how to apply patches, but can't figure out how to do it.

    If you have time it would be great if you could explain what I do with the files once i downloaded them. I have the patch.xml file and the other files.

    Thanks in advice!

  • Hi Jaymo,

    I replied to your post on the forums .

    I am looking into this issue now and will get back to you .

    In case you have any screenshots , please use the contact Form to send that to me .



  • Hi Raj,

    This looks great! Though, i don't know how to apply this patch to the AJAX Control Toolkit. Could you please help me?


  • Hi,

    In this code:

    function IAmSelected( source, eventArgs )


      alert( " Key : "+ eventArgs.get_text() +"  Value :  "+eventArgs.get_value());


    can I pass other parameters to the function (some controlId or something) beside source and eventArgs?

    If so, can you give me an example?


  • Hi riddler,

    The Function being IAmSelected is added as an event handler to the ItemSelected event on the flyout of the ACE.

    It gets the Arguments as are specified for the Eventhandlers of the ItemSelected Event in the AutoCompleteExtender's behaior.

    If you want to add an additional context , you can modify the behavior to add your extra parameters.


    Phani Raj

  • Hi !

    Thank you for your work, your code works like a charm :)



  • When I select an item from the available list I use the value to populate an id field.  However if I then change this item by typing text into the textbox the id field doesn't change.  How do I set the id field to null if I'm typing in a new item after selecting  an existing one?  Any help much appreciated.

  • Hello Mary ,

     When do you populate the "ID" Field ?

     is it after selecting an item from a list ?

    In case yes , then you can use the "itemSelected" event to change the  "ID" Field whenever a new value is selected.

    for ex: if you consider my above example in the post ,

    you need to modify the IamSelected Function to reset the "ID' Field.

    function IAmSelected( source, eventArgs ) {

      alert( " Key : "+ eventArgs.get_text() +"  Value :  "+eventArgs.get_value());

    //Do something to reset the ID Field


    Hope this helps

  • Thanks for your reply.  

    I'm populating the id field using the "itemselected" event.  However if I then change the text without selecting a new item from the list eg by typing a new item directly into the textbox the id field is not updated.  

    Is there anyway to clear the id field if the text is changed?

    Thanks again

  • Hi Mary ,

    There are 2 things you can do ,

    a) Subscribe to the onblur event of the textbox [ this is I.E Only ]

    b) Attach an OnHide Animation to the ACE and use a ScriptAction

    to clear the value of the "ID" Field .

    I'd suggest that you go with option (b) .

    <ajaxToolkit:AutoCompleteExtender blah blah  blah blah  blah blah  blah blah >



      <ScriptAction Script="ClearHiddenIDField()" />




    <script language="javaScript">

    function ClearHiddenIDField() {

    //Do something to reset the ID Field



    This way , the ID Field will be reset regardless of whether you select a value or not and also ,it will run AFTER the ItemSelected event .

    so , you should be safe :-)

    Hope this helps

  • First of all this is a great tool and easy to implement with excellent examples. I would like to be able to do this:

    When I select an item from the available list I use the value to populate an id field i.e. textbox,label to pass to a database.

    Thanks very much in advance.

Page 1 of 5 (65 items) 12345