Galin Iliev's blog

The scenario

I guess you are familiar with the case when user have a screen in which ClientId is needed in text box but it is quite unusual to let the users and clients to remember all those numbers. To facilitate users and clients you put DropDownList control (in case you are developing ASP.NET app) filled with ListItem elements and every item has it's Text and Value properties. Sounds common, isn't it?

The challenge

In today's world of Web 2.0  and DHTML mashups you may have same scenario like one above but needed to be implemented in similar behavior like ASP.NET AJAX Autocomplete extender does.

In other words - you have a textbox and a list with items but when user select an item instead if item's text some number or ID is put in the extended textbox.

The Solution

ASP.NET AJAX Autocomplete extendeer can be adjusted to behave that way.

First we should provide Text and Value pair... How to do that as there is strict definition of expected XML Web Service method?

ServiceMethod - The web service method to be called. The signature of this method must match the following:

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public string[] GetCompletionList(string prefixText, int count) 

Note that you can replace "GetCompletionList" with a name of your choice, but the return type and parameter name and type must exactly match, including case.

There is still way. We just need to pass pair in serialized way. If you take a look at Autocomplete test page source you will see that method

   1: [System.Web.Services.WebMethod]

   2: [System.Web.Script.Services.ScriptMethod]

   3: public static string[] GetCompletionListWithContextAndValues(string prefixText, int count, string contextKey)

   4: {

   5:     System.Collections.Generic.List<string> items = new System.Collections.Generic.List<string>(GetCompletionListWithContext(prefixText, count, contextKey));

   6:        for (int i = 0; i < items.Count; i++){

   7:           items[i] = AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(items[i], i.ToString());

   8:        }

   9:            return items.ToArray();

  10: }

So if we use helper method below we can get serialized pair

AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(text, val);

But that's not all. Unfortunately we have to modify the AutoCompleteBehavior.js in order to get value instead text property. More precisely we have to add one more line in it... in function _setText - it should start like this:

_setText: function(item) {
/// <summary>
/// Method to set the selected autocomplete option on the textbox
/// </summary>
/// <param name="item" type="Sys.UI.DomElement" DomElement="true" mayBeNull="true">
/// Item to select
/// </param>
/// <returns />

var text = (item && item.firstChild) ? item.firstChild.nodeValue : null;
text = (item && item._value) ? item._value : text;

Note: The very last line is added by us. This is enough to test. Rebuild the AjaxControlToolkit source, use produced assembly instead of downloaded one and enjoy.

Hope this helps!