Asked by:
See updated search results as you type

Question
-
User-387095454 posted
I've seen other people posting their Ajax controls in here, so I figured, now that I finally have something to contribute, I might as well. Hope this is ok.
I've developed a simple Extender that delays the postback of the OnChange event in a Textbox, so you can type and once you stop typing, the search results below in the page automatically get updated, it's almost like an Auto-Complete Box.
And here is the Code of the Javascript file, there is almost nothing in the cs file.
1 //based on some code in the Membership Editor from Peter Keller 2 //http://peterkellner.net/ 3 4 Type.registerNamespace('DelayedSubmit'); 5 6 DelayedSubmit.DelayedSubmitBehavior = function(element) { 7 8 DelayedSubmit.DelayedSubmitBehavior.initializeBase(this, [element]); 9 10 this._text = null; 11 this._timer = null; 12 this._tickHandler = null; 13 this._keyupHandler = null; 14 this._keydownHandler = null; 15 16 this._TimeoutValue = null; 17 18 } 19 20 DelayedSubmit.DelayedSubmitBehavior.prototype = { 21 22 initialize : function() { 23 DelayedSubmit.DelayedSubmitBehavior.callBaseMethod(this, 'initialize'); 24 25 this._tickHandler = Function.createDelegate(this, this._onTimerTick); 26 27 this._timer = new Sys.Timer(); 28 this._timer.set_interval(this._TimeoutValue); 29 this._timer.add_tick(this._tickHandler); 30 31 this._keyupHandler = Function.createDelegate(this, this._onkeyup); 32 $addHandler(this.get_element(), "keyup", this._keyupHandler); 33 34 this._keydownHandler = Function.createDelegate(this, this._onkeydown); 35 $addHandler(this.get_element(), "keydown", this._keydownHandler); 36 37 }, 38 39 dispose : function() { 40 41 if(this._timer) { 42 this._timer.dispose(); 43 this._timer = null; 44 } 45 this._tickHandler = null; 46 47 // TODO: add your cleanup code here 48 // Detach event handlers 49 if (this._keyupHandler) { 50 $removeHandler(this.get_element(), "keyup", this._keyupHandler); 51 this._keyupHandler = null; 52 } 53 if (this._keydownHandler) { 54 $removeHandler(this.get_element(), "keydown", this._keydownHandler); 55 this._keydownHandler = null; 56 } 57 58 DelayedSubmit.DelayedSubmitBehavior.callBaseMethod(this, 'dispose'); 59 }, 60 61 62 _onkeyup : function(ev) { 63 var k = ev.keyCode ? ev.keyCode : ev.rawEvent.keyCode; 64 if (k != Sys.UI.Key.Tab) { 65 this._timer.set_enabled(true); 66 } 67 }, 68 69 70 _onkeydown : function(ev) { 71 this._timer.set_enabled(false); 72 }, 73 74 75 _onTimerTick : function(sender, eventArgs) { 76 this._timer.set_enabled(false); 77 78 if(this._text != this.get_element().value) { 79 this._text = this.get_element().value; 80 81 this.get_element().onchange(); //compare to this.changed.invoke(this, Sys.EventArgs.Empty); 82 } 83 }, 84 85 86 get_Timeout : function() { 87 return this._TimeoutValue; 88 }, 89 90 set_Timeout : function(value) { 91 this._TimeoutValue = value; 92 } 93 } 94 95 DelayedSubmit.DelayedSubmitBehavior.registerClass('DelayedSubmit.DelayedSubmitBehavior', AjaxControlToolkit.BehaviorBase); 96
Hope this helps someone, let me know if there are some improvements. It should work with IE7, FF and Safari.
Cheers
Remy Blaettler
Tuesday, June 19, 2007 4:31 PM
All replies
-
User1545089107 posted
Hi Remy, I asked this in your codeproject posting also. But any thoughts on getting this to work with a textbox that has a requiredfieldvalidator attached to it? Thanks alot. And very awesome control.
Thursday, March 4, 2010 4:06 PM -
User-387095454 posted
Sorry, was on holiday. No clue at the moment, but will have a look at it.
Tuesday, March 16, 2010 2:33 PM