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