Simple - Take action when user types in TextBox

[NickThissen]

Hi,

I have an UpdatePanel with a GridView and a TextBox, which contains a filter for the GridView. When the user types in the TextBox I want the contents of the GridView to filter. I handle the TextChanged event of the TextBox on the server side, where I filter the contents of the GridView and rebind it. This all works fine, but the TextChanged event is not fired until the TextBox loses focus. That's not what I want; I want the grid to update as soon as the user types, not when he decides to tab out of the TextBox.

I thought I'd have to do it in javascript instead, but I can't possibly filter the contents of the GridView in javascript, so I thought of a workaround: I just set the focus to some button on the same page, and then set it back to the TextBox. This should cause the TextChanged event to be called (on the server) so that the GridView is filtered (since this is all in an UpdatePanel there's no problems of postbacks).

So I tried adding the 'onchange' attribute to the TextBox:

txtNameFilter.Attributes.Add("onchange", "javascript:filterChanged();");

and the Javascript is just this:

        function filterChanged() {
            var button = document.getElementById("<&#37;= btnClearFilter.ClientID %>");
            var textBox = document.getElementById("<%= txtNameFilter.ClientID %>");
            button.focus();
            textBox.focus();
        }

This still doesn't work though... The javascript is run, the focus is changed correctly, but it's the same problem: it only happens after the user tabs out of the TextBox.


The next thing I tried is using the 'onkeypress' or 'onkeyup' attributes (calling the same function). The onkeyup method seems to work, but not ideally. The TextBox loses focus (so the TextChanged server event is raised and the grid is filtered), but it does not get focus back. So you cannot keep typing...


How can I take action as soon as the user types, and not after the TextBox loses focus? Thanks!