Column filters :: Multiple select :: server-side :: make search delay (Solution)

musinik

Just in case someone will need.
With usage of invididual columns filtering the searchDelay didn't work for me.

I found a jQuery extension function here and tiny modified it, by adding "change" into the list of events listening to.
"Change" event works with Select fields.

So while user is clicking on the options from the list (in multiple select), the event waits while he finishes and only then triggers search().

The original post: http://stackoverflow.com/questions/14042193/how-to-trigger-an-event-in-input-text-after-i-stop-typing-writing

The modified version (works with dropdowns also, and should work with any input types actually):

(function($){
    $.fn.extend({
        donetyping: function(callback,timeout){
            timeout = timeout || 1e3; // 1 second default timeout
            var timeoutReference,
                doneTyping = function(el){
                    if (!timeoutReference) return;
                    timeoutReference = null;
                    callback.call(el);
                };
            return this.each(function(i,el){
                var $el = $(el);
                // Chrome Fix (Use keyup over keypress to detect backspace)
                // thank you @palerdot
                $el.is(':input') && $el.on('keyup keypress paste change',function(e){
                    // This catches the backspace button in chrome, but also prevents
                    // the event from triggering too preemptively. Without this line,
                    // using tab/shift+tab will make the focused element fire the callback.
                    if (e.type=='keyup' && e.keyCode!=8) return;
                    
                    // Check if timeout has been set. If it has, "reset" the clock and
                    // start over again.
                    if (timeoutReference) clearTimeout(timeoutReference);
                    timeoutReference = setTimeout(function(){
                        // if we made it here, our timeout has elapsed. Fire the
                        // callback
                        doneTyping(el);
                    }, timeout);
                }).on('blur',function(){
                    // If we can, fire the event since we're leaving the field
                    doneTyping(el);
                });
            });
        }
    });
})(jQuery);

So what you do is instead of .on( 'change', function () { you write .donetyping( function () {
Moreover if you add a listener to all of your dropdowns in scope (not one by one in columns loop), they will work "as one". Any dropdown (or other input) will wait while you are picking up options (or choosing radiobuttons or whatever).

It might look like this:

DropDowns.donetyping( function () {
            var val = $(this).val();
            if($.isArray(val)){val=val.join('$$');}
            table.column($(this).parents("td").index("td")).search( val ? ''+val+'' : '', false, false ).draw();
        } , 1200);