Server side searching -- update $scope.search only after the complete keyword is keyed in to reduce $http requests

[dbx834]

Hi,

I'm stoked about React and Angular becoming friends. I've been testing this grid out and it's quite useful. Good work developing it!

I have implemented full server-side 'grid-feeder' api that works with sort, filter and search. All of it comes together beautifully.

I, however, noticed that the search criteria is updated on every key press. Could it be/ is it possible to update the search criteria only after the search field is left?

Updating the grid with local data on every key press is slick but doing that for server data is bit of an over-kill and makes too many http requests. If not for local data, for remote data atleast, onChange/ onBlur update would be an improvement.

To give you an example, if I were to search for 'hello', this is what I would see in the console log in a very quick succession (a few ms after key press) as I was keying in 'hello' -

Configuration

var employees = [];

for(var i = 0; i < 499; i++){
    employees.push({
        firstName: "John " + i,
        lastName: "Doe " + i
    });
}

$scope.grid = {
    data: [],
    localMode: false,
    columnDefs: [
    {
        field: "firstName",
        displayName: "First Name"
    },
    {
        field: "lastName",
        displayName: "Last Name"
    }],
    getData: function() {
        var grid = this;
        console.log('------------------------------------');
        console.log('current page - ' + grid.currentPage);
        console.log('search - ' + grid.search);
        console.log('sort field - ' + grid.sortInfo.field);
        console.log('sort direction - ' + grid.sortInfo.dir);
        console.log('page size - ' + grid.pageSize);
        $timeout(function() {
            $scope.grid.data = employees.slice((grid.currentPage - 1) * grid.pageSize, (grid.pageSize * grid.currentPage));
            $scope.grid.totalCount = employees.length;
        }, 2000);
    }
};

Console log

------------------------------------
current page - 1
search -
sort field -
sort direction -
page size - 25
------------------------------------
current page - 1
search - h
sort field -
sort direction -
page size - 25
------------------------------------
current page - 1
search - he
sort field -
sort direction -
page size - 25
------------------------------------
current page - 1
search - hel
sort field -
sort direction -
page size - 25
------------------------------------
current page - 1
search - hell
sort field -
sort direction -
page size - 25
------------------------------------
current page - 1
search - hello
sort field -
sort direction -
page size - 25

[josebalius]

@dbx834 good point, we should be throlling the getData requests from search when in server mode. Unfortunately I am pretty busy at the moment with work, want to submit a PR?

[dbx834]

@josebalius Sure, give me a few days. I'll do this on the side.

[dbx834]

Hello again,

Please see my fork for a proof of concept. There are three new commits.

• Throttling on server mode (changed updateSearch function from onKeyUp to onBlur)
• Added a new server example with logging (server.html)
• Totally un-necessary basic example typo update (because I was originally debugging in basic.html and when I reverted it to original html, it showed differences in the Github App and it wouldn't go away)

Configuration

Same as above

Console log

---------------    Updated variables   ------------------
current page - 1
search -
sort field -
sort direction -
page size -
---------------------------------------------------------
---------------    Updated variables   ------------------
current page - 1
search - hello
sort field -
sort direction -
page size - 25
---------------------------------------------------------

Now, the search updates on clicking away from the input field rather than on every key press. What do you think?

While working on this update, I noticed there maybe 2 more small features that improve UI experience:

• Update on pressing enter
• Cancel and clear search field on pressing escape

Should I add these 2 before submitting a PR?

[josebalius]

@dbx834 I like the two you mentioned there at the end. In terms of when you to update the search, I think I still prefer for it to happen as I am typing but

1) We should have minimum amount of text needed before search happens 2) On every key up, we should set a timeout for like 500ms - 1s (maybe less) and cancel it on every key press, so that if i type a quick word, it won't search till I finish but if I type a partial phrase and stop, the ui can update with the results.

I think all of those would improve the UX. What do you think?

[dbx834]

@josebalius good points. Reading your message, I was thinking that different settings may make for different UX. Each UX may be superior in some scenario. It is good if the designer has freedom to configure as s/he pleases and requires.

Perhaps we can work this out like so,

Local mode

• Default: Search is updated on every key press (as it is now)
• Optional: Minimum length required before update
• Optional: Time delay in ms before update (if min length is also given, will start countdown only after min length is reached)

Server mode

• Default: Throttled update (update onBlur)
• Optional: Minimum length required before update (will take precedence over onBlur update)
• Optional: Time delay in ms before update (will take precedence over onBlur update. if min length is also given, will start countdown only after min length is reached)

Features in both local and server modes

• Press enter to update (overwriting time delay or minimum length if given. in server mode, one need not click away to see updated data ---> neater UX)
• Press escape to clear search field and cancel search

[josebalius]

@dbx834 Yep i think the above would work.