Jsgrid: filter by search input on keypress

[julmot]

To improve usability and user experience it would be great to be able to see search results on keypress like on DataTables.

[tabalinas]

For now you can reach this redefining text field filterTemplate like the following:

var originalFilterTemplate = jsGrid.fields.text.prototype.filterTemplate;
jsGrid.fields.text.prototype.filterTemplate = function() {
            var grid = this._grid;
            var $result = originalFilterTemplate.call(this);
            $result.on("keyup", function(e) {
                  // TODO: add proper condition and optionally throttling to avoid too much requests  
                  grid.search();
            });
            return $result;
        },

For example you can use the following handling: http://jsfiddle.net/82sTJ/1/

[ghost]

I'm running Angular, and therefore have access to $timeout, but this could be adjusted to accommodate non-angular apps. If another key is pressed while there's a pending $timeout, that $timeout is cancelled and a new one is started. I couldn't get keyup to fire when the filter input is completely cleared, but this seems to cover that as well.

// makes jsGrid apply filters after a 500 second debounce
$timeout(function () {
    $('#jsGrid :input').keydown(function () {
        var self = this;

        if (self.timeoutPromise)
            $timeout.cancel(self.timeoutPromise);

        if (self.value.length == 0)
            $('#jsGrid').jsGrid('loadData');

        self.timeoutPromise =
            $timeout(function () {
                $('#jsGrid').jsGrid('loadData');
            }, 500);
    });
});

[gus27]

Here's a way for vanilla JavaScript:

$("#jsGrid :input").keydown(function () {
    var self = this;

    if (self.timeout)
        clearTimeout(self.timeout);

    if (self.value.length == 0)
        $("#jsGrid").jsGrid('loadData');

    self.timeout = setTimeout(function() {
        $("#jsGrid").jsGrid('loadData');
    }, 500);
});

You'd better replace 'loadData' by 'reset' when you use paging.