so-29383466

KnockoutJS Debounced AJAX Search

by Casey Webb

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<input data-bind="value: searchText, valueUpdate: 'afterkeydown'" placeholder="Search repos..." />
<ul data-bind="foreach: repos">
    <li data-bind="text: full_name"></li>
</ul>

JavaScript

var ViewModel = function () {
    var self = this;

    self.repos = ko.observableArray([]);

    self.searchText = ko.observable('').extend({
        rateLimit: {
            method: 'notifyWhenChangesStop',
            timeout: 400
        }
    });

    self.searchText.subscribe(getRepos);

    function getRepos(query) {
        if (query === "") {
            self.repos([]);
            return;
        }

        $.get('http://api.github.com/search/repositories', {
            q: query
        }, function (res) {
            self.repos(res.items)
        });
    }
}

ko.applyBindings(new ViewModel);