How to pass a custom value to AutocompleteExtender?

ajax, ajaxcontroltoolkit, autocomplete

Solution

You need to handle `OnClientPopulating` event in JavaScript and set `contextKey` property value in handler:

function autoComplete1_OnClientPopulating(sender, args) {
    sender.set_contextKey(document.getElementById('drpCustomerType').value);
}


<cc1:AutoCompleteExtender runat="server" ID="autoComplete1" TargetControlID="txtItemName" EnableCaching="true"
ServicePath="~/AutoComplete.asmx" ServiceMethod="GetCompletionList" MinimumPrefixLength="1" 
UseContextKey="true"
CompletionInterval="10" CompletionSetCount="15" FirstRowSelected="True" CompletionListCssClass="AutoExtender"
CompletionListItemCssClass="AutoExtenderList" 
OnClientPopulating="autoComplete1_OnClientPopulating"
CompletionListHighlightedItemCssClass="AutoExtenderHighlight" />

Problem

I have this textbox and AutocompleteExtender ``` <asp:TextBox ID="txtItemName" runat="server" ClientIDMode="Static" MaxLength="300" onfocus="javascript:select();" ></asp:TextBox> <cc1:AutoCompleteExtender runat="server" ID="autoComplete1" TargetControlID="txtItemName" EnableCaching="true" ServicePath="~/AutoComplete.asmx" ServiceMethod="GetCompletionList" MinimumPrefixLength="1" CompletionInterval="10" CompletionSetCount="15" FirstRowSelected="True" CompletionListCssClass="AutoExtender" CompletionListItemCssClass="AutoExtenderList" CompletionListHighlightedItemCssClass="AutoExtenderHighlight" > </cc1:AutoCompleteExtender> ``` And the method is defined as ``` [WebMethod] public string[] GetCompletionList(string prefixText, int count, string contextKey) { List<string> items = new List<string>(count); SqlCommand con = new SqlCommand(); SqlDataReader sdr = null; DataSet ds = new DataSet(); try { SqlCommand cmd = new SqlCommand(); cmd.CommandText = "proc_NewBooking"; cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.AddWithValue("@BranchId", Globals.BranchID); cmd.Parameters.AddWithValue("@ItemName", prefixText.ToString()); cmd.Parameters.AddWithValue("@Flag", 11); sdr = AppClass.ExecuteReader(cmd); ds = AppClass.GetData(cmd); while (sdr.Read()) { items.Add("" + sdr.GetValue(0)); } sdr.Close(); sdr.Dispose(); } catch (Exception ex) { // Log the message and continue } return items.ToArray(); } ``` What I want is to pass a custom value, the documentation says that we can do this using `contextKey` property So, I added this line to `AutocompleteExtender`. ``` <cc1:AutoCompleteExtender runat="server" ID="autoComplete1" TargetControlID="txtItemName" EnableCaching="true" ServicePath="~/AutoComplete.asmx" ServiceMethod="GetCompletionList" MinimumPrefixLength="1" ContextKey="javascript:document.getElementById('drpCustomerType').value" CompletionInterval="10" CompletionSetCount="15" FirstRowSelected="True" CompletionListCssClass="AutoExtender" CompletionListItemCssClass="AutoExtenderList" CompletionListHighlightedItemCssClass="AutoExtenderHighlight" > </cc1:AutoCompleteExtender> ``` and overloaded the method to accept this as follows, ``` public string[] GetCompletionList(string prefixText, int count, string contextKey) { // custom code based on context key } ``` but when debugger hits it, I am not getting the value of `drpCustomerType` instead, I am getting the hardcoded string "javascript:document.getElementById('drpCustomerType').value"? Can anyone tell me how can I pass the value of `drpCustomerType` to this method so that I can show item lists based on that?

Original source