locked
See updated search results as you type RRS feed

  • 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.

    Live Demo and Source Code

    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