How to make an ASP.NET TextBox fire it's onTextChanged event fire in an AJAX UpdatePanel?

I am trying to get an textBox to fire it's onTextChanged event every time a keystroke is made rather than only firing only when it loses focus. I thought that adding the AsyncPostBackTrigger would do this but it's still not working. Is what I'm trying to do even possible? The code is below:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Items.aspx.cs" MasterPageFile="~/MMPAdmin.Master" Inherits="MMPAdmin.Items" %>
<asp:Content ID="content1" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">
<asp:ScriptManager ID="sm_Main" runat="server" />
    <div style="left:10px;position:relative;width:100%;overflow:hidden">
        <asp:UpdatePanel ID="up_SearchText" runat="server">
            <Triggers>
                 <asp:AsyncPostBackTrigger ControlID="tb_Search" EventName="TextChanged" />
            </Triggers>
            <ContentTemplate>
                <div style="position:relative;float:left">
                    <b style="font-size:xx-large">Items</b>(<a href="Item.aspx">Add New</a>)
                </div>
                <div style="right:25px;position:absolute; top:30px">
                    Search: <asp:TextBox ID="tb_Search" runat="server" Width="200" OnTextChanged="UpdateGrid" AutoPostBack="true" />
                </div>
                <br />
                <div>
                    <asp:GridView runat="server" AutoGenerateColumns="true" ID="gv_Items" AutoGenerateEditButton="true" AutoGenerateDeleteButton="true" />
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</asp:Content>

Solution 1:

  • You need to call the _postback() function for your textbox control when the onkeyup is raised using javascript.
  • However, since your textbox is inside your update panel, the textbox will get re-rendered everytime the user hits a key, causing the cursor to loose focus.
  • This will not be usable unless you get your textbox out of the the updatepanel. That may work out for you, as update panels tend to be a bit slow, you may still have usability issues. - I would suggest using an autocomplete component.

P.S : there is one in the asp.net control toolkit or you could use the jquery autocomplete plugin which I have found to be a bit better.

Solution 2:

AutoPostBack="true" OnTextChanged="TextBox1_TextChanged"

Both events are required to trigger text change event.