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

Question

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>

Unwind

Answer 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.

Padriac

Just to add to @smercer's response: The onTextChange event only fires on postback - not on update to the textbox. What the OP is looking for is closer to the JavaScript onKeyPress event. @Smercer is correct that your best bet is one of the components mentioned. – Luckily

I'm not clear on how I would use the autocomplete component to accomplish what I need to do. I was hoping to use javascript to bounce the focus on the onkeyup event for the text box but like you said the textbox looses focus everytime. If I take the textbox out of the update panel then the event will cause a postback everytime I type something which won't work. Would it be possible to assign focus to the text box after it rerenders? – Unwind

When i say "bounce focus" this is what i'm talking about: function BounceFocus(){ var element = document.getElementById('<%=tb_Search.ClientID%>'); element.blur(); element.focus(); } – Unwind

Ok so by moving the textBox out of the updatePanel, keeping the Asynch Trigger in there, and attaching the onkeyup BounceFocus i got it working. Thanks for the help! – Unwind

I get 'Too many characters in literal' when I try doing something like Broham's document.getElementById('<%=tb_Search.ClientID%>'); – Partida

Answer 2

AutoPostBack="true" OnTextChanged="TextBox1_TextChanged"

Both events are required to trigger text change event.

Garrulity

Answer 3

Dont Need use AJAX controls for checking the availability.. Its is not Compulsory to use it AJAX Controls.. We can use the Following Code..

<iframe>
<asp:TextBox ID="TextBox1" runat="server" AutoPostBack="true" ontextchanged="TextBox1_TextChanged"></asp:TextBox>

 protected void TextBox1_TextChanged(object sender, EventArgs e)
    {
        RequiredFieldValidator1.ErrorMessage = "";
        Label1.Text = "";
        string name = TextBox1.Text.ToString();
        string constr = "data Source=MURALY-PC\\SQLEXPRESS; database=Online; Integrated Security=SSPI";
        SqlConnection con = new SqlConnection(constr);
        con.Open();
        string query = "select UserName from User_tab where UserName='" + name + "'";
        SqlCommand cmd = new SqlCommand(query, con);
        SqlDataReader dr = cmd.ExecuteReader();
        if (dr.Read())
        {

            Label1.Text = "UserName Already Exists";
        }
        else
        {
            Label1.Text = "";
            Label1.Text = "UserName Available";
        }
        con.Close();


    }
</iframe>

Kaminsky

This doesn't show how the data in the GridView gets updated, however. That's the reason for the UpdatePanel -- not just the textbox data changing to trigger a textual notification, but for the GridView to update as a result of the change. True that a label could show data in an onchange fashion like this without AJAX, but sometimes it's a lot rougher to add database tables of data to labels than it is to a GridView - which do require UpdatePanels. – Partida

Answer 4

All the AsyncPostBackTrigger does is make sure only that portion of the page refreshes when the event is fired, it does not change when the event is fired.

I think it's possible to do what you want, but you'd need to write some javascript code to manually fire the event... and I don't even want to think about making that work.

Anarthrous