Click here to Skip to main content
13,194,662 members (52,213 online)
Click here to Skip to main content
Add your own
alternative version


16 bookmarked
Posted 7 Apr 2010

Using the AutoComplete Extender to Automatically Perform a PostBack

, 7 Apr 2010
Rate this:
Please Sign up or sign in to vote.
Demonstrates how to use the AutoComplete Extender to automatically perform a PostBack


The ASP.NET Ajax Control Toolkit provides a very helpful AutoCompleteExtender control that allows developers to easily provide Google Suggest like auto-complete features, and even provides a key / value mode for drop-down like behavior. (You can read a fantastic overview of this functionality here.)

One drawback of this control, however, is that it does not provide native functionality to automatically initiate a server side post-back inside an update panel when the user selects an item in the suggestion list. This article will briefly review how to implement this functionality.


In order to avoid repetition, this code builds on the examples built in the "Implementing Google like Suggestion using Autocomplete Extender" article.

Using the Code

If you ever want a user's selection on an AutoComplete control to trigger a post back to your web server, you will immediately notice that the control does not contain a built in server event for this action. Fortunately for us, however, the control does have a client side event. We can use this client side event to send the selected value to the server through a hidden control using JavaScript.

This example uses an UpdatePanel because most applications that use an Ajax based control to select a value will also expect that the page will not refresh once a selection is made. The UpdatePanel, however, is not needed. The web controls in our example can be laid out very simply:

<asp:updatepanel id="update1" runat="server">
    <asp:hiddenfield id="hdnValue" onvaluechanged="hdnValue_ValueChanged" runat="server"/>
    <asp:textbox runat="server" id="myTextBox" width="300" autocomplete="off" />
    <ajaxtoolkit:AutoCompleteExtender runat="server" 







        minimumprefixlength="2" completioninterval="1000" 

        enablecaching="true" completionsetcount="20" 

        delimitercharacters=";, :" 



Of particular importance is the OnClientItemSelected attribute to the autocomplete control. This property indicates that the OnContactSelected JavaScript function will be called when the user makes a selection. The implementation of our method differs from that of the original article because it sets our hidden field value and causes a postback of the form.

    function OnContactSelected(source, eventArgs) {
    var hdnValueID = "<%= hdnValue.ClientID %>";

    document.getElementById(hdnValueID).value = eventArgs.get_value();
    __doPostBack(hdnValueID, "");

The above JavaScript function sets the value of our hidden field, and uses that same hidden field as the impetus of the ASP.NET framework's <code>__doPostBack call. Because the hidden field has a handler for the OnValueChanged event, the code will call the following event handler on the server side. We can use this event to look up further information from some persistent store, update other fields on the page, or any other needed functionality.

protected void hdnValue_ValueChanged(object sender, EventArgs e)
    string selectedWidgetID = ((HiddenField)sender).Value;

    Widget w = MyEntityService.GetWidget(selectedWidgetID);

    ///populate the form based on retrieved data


  • 7th April, 2010: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Jonathan Cortis
Technical Lead CTS, Inc. Birmingham, AL
United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
Shibasis Sengupta24-Sep-13 3:30
memberShibasis Sengupta24-Sep-13 3:30 
QuestionThanks man it helped me Pin
SelvinTurai4-Apr-13 15:05
memberSelvinTurai4-Apr-13 15:05 
GeneralMy vote of 4 Pin
Mr. Truong Pham28-Mar-13 1:12
memberMr. Truong Pham28-Mar-13 1:12 
QuestionThanks very much Pin
Mythos725-Oct-12 4:34
memberMythos725-Oct-12 4:34 
QuestionIs there a way to call a generic method on the server? Pin
Member 137306319-Jan-11 9:29
memberMember 137306319-Jan-11 9:29 
I have three AutoCompleteExtenders on my page and want them all to call back to ONE method on the server. My intent is that from that method I will be able to determine which AutoCompleteExteneder caused the postback - and pull the event argument passed from the client. Any ideas?

If I have to use a hidden control - fine - I was just looking for a bit of a cleaner way.
Generalgetting id field Pin
Member 33200607-Jul-10 3:00
memberMember 33200607-Jul-10 3:00 
GeneralRe: getting id field Pin
njoshi19877-Nov-11 21:58
membernjoshi19877-Nov-11 21:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171018.2 | Last Updated 7 Apr 2010
Article Copyright 2010 by Jonathan Cortis
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid