CODEWITHSUNDEEP
knockout.jskendo-ui
Jeremy Holt
Jeremy Holt

Reputation: 1007

Kendo-Knockout - how to bind AutoComplete to remote data?

I using Kendo-Knockout.

I am trying to get the AutoComplete to bind to remote data. Using the basic example at http://rniemeyer.github.com/knockout-kendo/web/AutoComplete.html I've tried the following. However, search is not updated until the input has lost focus.

"search" only looks for something if it is already in the observableArray.

The only event provided with the Kendo Autocomplete is "change", which again only fires after the input has lost focus.

How would you intercept the key press, and access the value of search() so that you can make a remote call?

In additon, how would you access the value of 'id' once the item has been selected?

Thanks Jeremy 

<strong><p style="margin-top: 100px;" data-bind="text: search"></p></strong>

<input data-bind="kendoAutoComplete: { data: choices, value: search,  
dataTextField: 'name',  valueUpdate: 'afterkeydown' }" />

<script type='text/javascript'>
$(function () {
    var myViewModel = function () {
        var self = this;
        this.choices = ko.observableArray([
            { id: "1", name: "apple" },
            { id: "1", name: "apple2" },
            { id: "1", name: "apple3" },
            { id: "2", name: "orange" },
            { id: "3", name: "banana" }
        ]);

        this.selectedChoice = ko.observable();

        self.search = ko.observable();

        self.search.subscribe(function() {
            console.log(self.search());
            // would send search to $.ajax to get the remote data
        });
    };

    ko.applyBindings(new myViewModel());
});

Upvotes: 2

Views: 3725

Answers (2)

Paul Hill
Paul Hill

Reputation: 85

the following knockout binding allows live updates on the search filter changing within the view model:

<input data-bind="kendoAutoComplete:
{
    value: value,
    data: suggestions,
    filtering: onSuggestionsChanged
}" />

value is the selected value, suggestions is an observable array you fill with results and onSuggestionsChanged is a function in your viewmodel that's called each time the user changes the text in the field.

Kendo UI Filter event description

Upvotes: 0

RP Niemeyer
RP Niemeyer

Reputation: 114792

It is possible to do something like this:

<input data-bind="kendoAutoComplete: { 
                    data: {}, 
                    minLength: 3, 
                    dataTextField: 'Name',
                    dataSource: {
                        type: 'odata',
                        serverFiltering: true,
                        serverPaging: true,
                        pageSize: 20,
                        transport: {
                            read: 'http://odata.netflix.com/Catalog/Titles'
                        }
                    }, 
                    value: selectedChoice }" />

You can store this in a JavaScript object and point to it as well.

Sample: http://jsfiddle.net/rniemeyer/m8vVA/

Upvotes: 2

Related Questions