Ajax autocomplete extender and get ID of selected item?

Question

I am using the autocomplete extender to suggest names when a user types. How to get the select value after the user selects an item? I guess I can use onclientitemselected but I am not familiar on how to write this? I need to populate a textbox based on the selection in the autocompleteextender textbox. Thank you

 <asp:TextBox ID="TextBox1" runat="server" Height="27px" Width="570px"></asp:TextBox>
        <asp:AutoCompleteExtender ID="AutoCompleteExtender" runat="server" 
    DelimiterCharacters="" Enabled="True" ServicePath="AutoComplete.asmx"  
    ServiceMethod="GetCompletionList" TargetControlID="TextBox1" 
    MinimumPrefixLength="2" UseContextKey="true" ContextKey="StateDropDown" 
            CompletionListElementID="autocompleteDropDownPanel">
</asp:AutoCompleteExtender>

Basidium

Answer 1

The AutoCompleteExtender merely extends the ASP.NET TextBox control, so if you want to know when the text changed, then just raise the TextChanged event on the TextBox control, like this:

Markup:
<asp:TextBox ID="TextBox1" runat="server" Height="27px" Width="570px" OnTextChanged="TextBox1_TextChanged" AutoPostBack="true"></asp:TextBox>

Code-Behind:
protected void TextBox1_TextChanged(object sender, EventArgs e)
{
    // Do something here with textbox value
}

Pickar

The text changed event doesnt fire on a autocomplete selection for some reason – Basidium

Karl beat me to it, so I'll add my answer below: TextBox has a TextChanged event that you can try to handle. In my experience it hasn't been very useful, because it only fires after the user tabs out of the box (not on each character entry). But this may work for you. – Promptbook

@Basidium - AutoPostBack property must be true for the event to fire, see edited code above. – Pickar

See my comment above--it should fire once focus leaves the textbox. If that doesn't work for you, you have two options: JavaScript and jQuery or adding a "select" button whose event you can handle and then access the textbox's value. – Promptbook

Problem with this though it has a scroll bar on the extender and when you scroll it fires the text changed event – Basidium

Answer 2

For this you need to return the list from web service method with ID and Text

Here "lst" is the actual list with data from your data source.

List<string> items = new List<string>(count);
        for (int i = 0; i < lst.Count; i++)
        {
            string str =AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(lst[i].Text,Convert.ToString(lst[i].IDValue));                
            items.Add(str);

        }
        return items.ToArray();

Then simple javascript

function GetID(source, eventArgs )
    {
        var HdnKey = eventArgs.get_value();
        document.getElementById('<%=hdnID.ClientID %>').value = HdnKey;
    }

and dont forget to set the attribute in auto complete extender OnClientItemSelected="GetID"

Estaestablish

This is a good answer, but see also this – Burgundy