See Search Results As You Type - An ASP.NET AJAX Control [Like Google Instant Search]

This is not a new control developed from scratch. This tutorial is all about making an old control compliant with very new AjaxControlToolKit June 2012 release. For the original control, readers can go through this article.

For executing instant search in ASP.NET, we have 2 options:

1. Call the search execution server method using HttpHandler or Webservice.
2. Use updatepanel to trigger the TextBox_TextChanged event asynchronously.

The problem with the first method is when we are creating server controls dynamically according to the search, if there are controls having events attached, the event wouldn't get fired as the page life cycle wouldn't be executed when the controls are added using handler or webservice.

In the second method, the page life cycle would execute. But the problem with this method is TextBox_TextChanged event would be only fired when there occurs a postback to the server.

So if we need to execute the page life cycle and fire the TextBox_TextChanged event asynchronously, we need to use this Ajax search control.

When I did a debug of the DelayedSubmit control, I found that the DelayedSubmitBehavior.js is not at all getting loaded with the new toolkit. For making the control compliant with the new AjaxControlToolKit framework, I had to dig into the toolkit source code. After analysis, I found that the control behavior JavaScript loading logic has been completely changed with the new AjaxControlToolKit. As per the new toolkit, the behaviour JavaScript associated with the control has to be in Sys.Extended.UI namespace. So I modified the namespaces in the DelayedSubmitBehavior.js and added the dependent JavaScript references and modified the references to the DelayedSubmitBehavior.js in the DelayedSubmitExtender.cs also. Now coming to dependent JavaScripts, every Ajax control in the ajaxtookit will be dependant on Sys.Extended.UI.ExtendedBase and here our control is dependant on timer control also, as the textbox change event would be fired after a specific time period. So we need this line of code to tell the framework that these 2 JavaScript files also have to be loaded for the proper execution of our control.  

if (window.Sys && Sys.loader) Sys.loader.registerScript(scriptName, 
["Sys.Extended.UI.ExtendedTimer", "Sys.Extended.UI.ExtendedBase"]" execute); 

For more information, readers can refer to the toolkit source code at https://github.com/DevExpress/AjaxControlToolkit/.

Hooray! Now it is working charmingly like a baby.

This is also a tutorial for writing new controls for AjaxControlToolKit. By verifying the old and new code, the reader can understand the new methodology for creating a new control. These changes have not been documented here.

//DelayedSubmitBehavior.js - Before Changes 

//based on some code in the Membership Editor from Peter Keller
//http://peterkellner.net/

Type.registerNamespace('DelayedSubmit');

DelayedSubmit.DelayedSubmitBehavior = function(element) {

    DelayedSubmit.DelayedSubmitBehavior.initializeBase(this, [element]);

    this._text = null;
    this._timer = null;
    this._tickHandler = null;
    this._keyupHandler = null;
    this._keydownHandler = null;

    this._TimeoutValue = null;
}

DelayedSubmit.DelayedSubmitBehavior.prototype = {

    initialize : function() {
        DelayedSubmit.DelayedSubmitBehavior.callBaseMethod(this, 'initialize');

        this._tickHandler = Function.createDelegate(this, this._onTimerTick);
        
        this._timer = new Sys.Timer();
        this._timer.set_interval(this._TimeoutValue);
        this._timer.add_tick(this._tickHandler);
               
        this._keyupHandler = Function.createDelegate(this, this._onkeyup);
        $addHandler(this.get_element(), "keyup", this._keyupHandler);    
        
        this._keydownHandler = Function.createDelegate(this, this._onkeydown);
        $addHandler(this.get_element(), "keydown", this._keydownHandler);        
    },

    dispose : function() {
    
        if(this._timer) {
            this._timer.dispose();
            this._timer = null;
        }
        this._tickHandler = null;
    
        // TODO: add your cleanup code here
        // Detach event handlers
        if (this._keyupHandler) {
            $removeHandler(this.get_element(), "keyup", this._keyupHandler);
            this._keyupHandler = null;
        }
        if (this._keydownHandler) {
            $removeHandler(this.get_element(), "keydown", this._keydownHandler);
            this._keydownHandler = null;
        }

        DelayedSubmit.DelayedSubmitBehavior.callBaseMethod(this, 'dispose');
    },

    _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(); //compare to this.changed.invoke(this, Sys.EventArgs.Empty);
        }
    },

    // TODO: (Step 2) Add your property accessors here
    //
    get_Timeout : function() {
        return this._TimeoutValue;
    },

    set_Timeout : function(value) {
        this._TimeoutValue = value;
    }
}

DelayedSubmit.DelayedSubmitBehavior.registerClass
('DelayedSubmit.DelayedSubmitBehavior', AjaxControlToolkit.BehaviorBase);
}

//DelayedSubmitBehavior.js - After Changes
//based on some code in the Membership Editor from Peter Keller
//http://peterkellner.net/
(function () {
    var scriptName = "ExtendedDelayedSubmit";

    function execute() {
        Type.registerNamespace('Sys.Extended.UI');

        Sys.Extended.UI.DelayedSubmitBehavior = function (element) {

            Sys.Extended.UI.DelayedSubmitBehavior.initializeBase(this, [element]);

            this._text = null;
            this._timer = null;
            this._tickHandler = null;
            this._keyupHandler = null;
            this._keydownHandler = null;

            this._TimeoutValue = null;
        }

        Sys.Extended.UI.DelayedSubmitBehavior.prototype = {

            initialize: function () {
                Sys.Extended.UI.DelayedSubmitBehavior.callBaseMethod(this, 'initialize');

                this._tickHandler = Function.createDelegate(this, this._onTimerTick);

                this._timer = new Sys.Timer();
                this._timer.set_interval(this._TimeoutValue);
                this._timer.add_tick(this._tickHandler);

                this._keyupHandler = Function.createDelegate(this, this._onkeyup);
                $addHandler(this.get_element(), "keyup", this._keyupHandler);

                this._keydownHandler = Function.createDelegate(this, this._onkeydown);
                $addHandler(this.get_element(), "keydown", this._keydownHandler);
            },

            dispose: function () {

                if (this._timer) {
                    this._timer.dispose();
                    this._timer = null;
                }
                this._tickHandler = null;

                // TODO: add your cleanup code here
                // Detach event handlers
                if (this._keyupHandler) {
                    $removeHandler(this.get_element(), "keyup", this._keyupHandler);
                    this._keyupHandler = null;
                }
                if (this._keydownHandler) {
                    $removeHandler(this.get_element(), "keydown", this._keydownHandler);
                    this._keydownHandler = null;
                }

                Sys.Extended.UI.DelayedSubmitBehavior.callBaseMethod(this, 'dispose');
            },

            _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(); //compare to 
                                                   //this.changed.invoke(this, Sys.EventArgs.Empty);
                }
            },

            // TODO: (Step 2) Add your property accessors here
            //
            get_Timeout: function () {
                return this._TimeoutValue;
            },

            set_Timeout: function (value) {
                this._TimeoutValue = value;
            }
        }

        Sys.Extended.UI.DelayedSubmitBehavior.registerClass
        ('Sys.Extended.UI.DelayedSubmitBehavior', Sys.Extended.UI.BehaviorBase);
        Sys.registerComponent(Sys.Extended.UI.DelayedSubmitBehavior, {
            name: "delayedsubmit"
        })
    }
    if (window.Sys && Sys.loader) Sys.loader.registerScript
    (scriptName, ["Sys.Extended.UI.ExtendedTimer", "Sys.Extended.UI.ExtendedBase"], execute);
    else execute()
})();

Happy coding!