How to trigger an UpdatePanel by a TextBox control?

Question

Consider the following code:

<label>Search:</label><asp:TextBox runat="server" ID="search" ClientIDMode="Static" OnKeyUp="$('#searchButton').click();" /><asp:Button runat="server" ID="searchButton" ClientIDMode="Static" />
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:GridView runat="server" DataSourceID="EntityDataSource1" 
            AllowPaging="True" AllowSorting="True" AutoGenerateColumns="true" PageSize="20"
            Width="400" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="searchButton" />
    </Triggers>
</asp:UpdatePanel>

The button will trigger an update of the panel. I wanted to trigger an update by a keydown of the search field, so I'm 'faking' it with a jQuery statement that clicks the button. I'm wondering... there must be a better way... right!?

Cogitate

May be this would help you #1009586 – Linnie

@Kiran the search field is outside the update panel, which makes it a tat differenct that question 1009086, because if I use an auto submit the page will be submitted. Maybe Remy is right and should I write my own control for it... – Cogitate

Yes I too agree.As I am also right now working on the same thing may be he his right. – Linnie

@KeesC.Bakker, as such I don't see any issue in faking click on the trigger. The UpdatePanel model works by capturing form submit - the element that has caused submit is checked against the map maintained of valid submit triggers. Unless you want to rely on internal workings of UpdatePanel, IMO, faking trigger click seems to be a nice non-intrusive solution. – Mowry

Answer 1

You can do this to refresh your updatepanel without the button:

<script type="text/javascript">

    function refreshPanel() {
        __doPostBack('<%= updatePanel.UniqueID %>', '');
    }

</script>
<label>Search:</label>
<asp:TextBox runat="server" ID="search"  
                ClientIDMode="Static" OnKeyUp="refreshPanel();" />
<asp:UpdatePanel runat="server" ID="updatePanel">

You just need to give your updatepanel an ID (updatePanel here)

Execute that code on a keyup or whenever you are ready for it.

Pacifist

It submits the page. I would like to do a AJAX post back that causes no page refresh. – Cogitate

Turns out the <% %> can't be set to the OnKeyUp property :( – Cogitate

@KeesC.Bakker: Just put the code in a seperate function and call that function in your keyup. – Pacifist

Answer 2

The link is a bit outdates, but should pretty much do what you want:
http://remy.supertext.ch/2007/06/see-search-results-as-you-type-an-aspnet-ajax-control/

Lovesome

Not that I know, but my code does pretty much what you need, no? – Lovesome

Yeah. I would like to merge the DelayedSubmitExtender and the TextBox into one of control, so it can work together as a trigger-option. – Cogitate