ASP.NET AutoCompleteExtender with ContextKey

Here is a quick overview of all the pieces you need to add an auto complete extender with a context key to your website project. It is assumed you have already added the AJAX toolkit to Visual Studios. What is a context key? It extra value that is sent to the script to help filter string array returned to the auto complete extender. In my project I needed the context key to be the value selected from a drop down list higher up my page. This value combined with the text entered by the user would select a list of projects from my database. The web forms file which will need a script manager and this code placed in a update panel.

<asp:DropDownList ID="ddlClient" runat="server" DataSourceID="sdsClient" 
    DataTextField="ClientName" DataValueField="clientid" ></asp:DropDownList>    

<asp:TextBox ID="txtProject" runat="server"></asp:TextBox>

<asp:AutoCompleteExtender ID="txtProject_AutoCompleteExtender" runat="server" 
    DelimiterCharacters="" Enabled="True" ServiceMethod="GetProjectList" MinimumPrefixLength="1" 
    TargetControlID="txtProject" ContextKey="340">
</asp:AutoCompleteExtender>

So three controls here, the drop down, the text box and the auto complete extender. Note: The auto complete extender properties “ServiceMethod” (name of the code behind function to return string array), “MinimumPrefixLength”, “‘TargetControlID”, and “ContextKey” (I set a default value here).

Next there is the actual code behind function that returns the string array to the auto complete.

<System.Web.Services.WebMethod()> _
<System.Web.Script.Services.ScriptMethod()> _
    Public Shared Function GetProjectList(ByVal prefixText As String, ByVal count As Integer, ByVal contextKey As String) As String()
       'your code to query the database goes here
       'use the prefixText and contextKey in your query
       'return a string array
    End Function

At this point the auto complete should work but only the default context key will be used. To dynamically change the context key value when the drop down list is changed we need to add some more code behind and some JavaScript. First this line should be add to the Page Load event handler and called only if it is not a post back.

ddlClient.Attributes.Add("onchange", "GetClientID(this.options[this.selectedIndex].value)")

Both arguments are strings. The first is the HTML event attribute name and the second is the JavaScript function to be called. Speaking of which, here is the JavaScript function to add to the head of the aspx file or if you have a master page to the appropriate content place holder.

function GetClientID(clientid) {
   $find('<%=txtProject_AutoCompleteExtender.ClientID%>').set_contextKey(clientid);
}

$find is a shortcut function Microsoft built into their AJAX library.

And that’s it. When the drop down changes the GetClientID function is called which sets the new context key value. When the user types into the project text box a AJAX request is sent to the server, processed by GetProjectList and a string array is returned.