See search results as you type – An ASP.NET Ajax Control
June 19th, 2007 by Rémy Blättler
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!
