
Highrise and other new Ajax enabled tools have this feature that when you type in a search query, it automatically updates the search results below. It’s almost like a Auto-Complete Box, but with full results on the page instead of a drop down list below the control. Unfortunately I didn’t find anything like this in the Microsoft ASP.NET Ajax Toolkit.
So there was only one solution, build it myself.
Here is the result:
Live Demo
VS 2008 Solution with Source Code
There is some other stuff in there too, but the demo for this project is under /RemyExamples/DelayedSubmitExample and the source code for the Control under /DelayedSubmit.
It’s my first Ajax Control, so I’m sure there is room for improvements. I’ve tested it in IE7, FF and Safari. Seems to work fine in all of them.
I used the Membership Editor Example from Peter Keller and TextChangedBehavior.js from Garbin as my inspiration and resource, but started with a VS ASP.NET Ajax Control Project to get the framework up and running.
The only thing the code really does is start a time on the keyup event, stop the time on keydown and after the time fires, it executes the onchange method of the associated Textbox. This way we get a delayed postback after the user stopped typing and not tons of postbacks when he’s still writing something.
_onkeyup : function(ev) {
var k = ev.keyCode ? ev.keyCode :
ev.rawEvent.keyCode;
if (k != Sys.UI.Key.Tab) {
this._timer.set_enabled(true);
}
},
_onkeydown : function(ev) {
this._timer.set_enabled(false);
},
_onTimerTick : function(sender, eventArgs) {
this._timer.set_enabled(false);
if(this._text != this.get_element().value) {
this._text = this.get_element().value;
this.get_element().onchange();
}
},
Everthing else is just setup and teardown code. In the ASP page, one can just add this Control like any other Extender and add an OnChange handler to the textbox.
<cc1:DelayedSubmitExtender ID="DelayedSubmit"
runat="server" Timeout="1000"
TargetControlID="TextBox1"/>
<asp:TextBox ID="TextBox1" runat="server"
AutoPostBack="True"
OnTextChanged="TextBox1_TextChanged"
Columns="50"></asp:TextBox>
Please let me know how it goes and if it is of any use. Good luck!
