How to pass a custom value to AutocompleteExtender?

Question

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?

Answer 1

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" />