Computer Overlord

Using Ajax AutoCompleteExtender with Name and Key/Value lists

With release 4941 of the Ajax Control Toolkit, you can use name/value lists with Ajax AutoCompleteExtender! Huzzah!

1) In HTML, Declare an autocomplete extender with the OnClientItemSelected client event.

<cc1:AutoCompleteExtender 
ID="KeyWordExtender" 
runat="server" 
TargetControlID="Keywords"
ServiceMethod="GetKeywordList"
ServicePath="~/Service/ServiceProxy.asmx" 
OnClientItemSelected="KeyWordExtender_onClientItemSelected" />

2) In javascript, use this signature:
NOTE: The eventArgs, quite cleverly is an <li> object

function KeyWordExtender_onClientItemSelected(source, eventArgs)
{
    alert( " Text: " + eventArgs.get_text() + "  Id:  " + 
        eventArgs.get_value()); 
}

3) In your webservice, add the data using the commandAjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem (<displayText>,<id>);

[WebMethod]
[ScriptMethod]
public List GetKeywordList(string prefixText, int count)
{
    //get data here
    foreach (JsonPayload payload in json.payloads)
    {
        list.Add(
            AjaxControlToolkit.AutoCompleteExtender.
                CreateAutoCompleteItem(
                    payload.t, Convert.ToString(payload.i)));
    }
    return list;
}

With much thanks to Phani Raj

6am