Knockout.js delay valueUpdate: afterkeydown

Vote count: 0

I have a search bar that data binds results in a grid using afterkeydown. However, the binding is happening too quickly. Users only have time for a single key press before the results start to populate. I have a Block UI element that prevents interaction with the page while results are loading, thus stopping the search query at a single character until results are loaded.

I know there's a knockout extender called rateLimit to delay the call until after a specified time period after changes stop, but I've been unable to see any difference when add it to the definition of 'searchTerm'. Is there another method I should be using?

I have provided my search box, the definition of the 'searchTerm' observable and where it's used to load my grid results:

<input data-bind="value: searchTerm, valueUpdate: 'afterkeydown'" />

Knockout:

var app = app || {};
    app.data = @Html.Raw(Json.Encode(Model));

app.CreateVM = function (data) {
    var vm = {};
    vm.searchTerm = ko.observable(data.Search);
    ...
}

vm.filterResults = function () {
    app.getResultsList(vm.selectedItem(), vm.searchTerm(), vm.currentPage() + 1, vm.sortDirection(), vm.sortProperty(), updateGrid);
}

app.getResultsList = function (Id, searchTerm, pageIndex, sortDirection, sortProperty, callBack) {

$.ajaxCall({
    url: $('#clientGrid').data('url'),
    type: 'GET',
    dataType: 'json',
    data: {
        Id: Id,
        pageIndex: pageIndex,
        sortDirection: sortDirection,
        sortProperty: sortProperty,
        filter: searchTerm
    },
    ...
}

asked 21 secs ago

noclist

Let's block ads! (Why?)

Knockout.js delay valueUpdate: afterkeydown