Kendo-Knockout - 如何将自动完成绑定到远程数据？答案

【问题标题】：Kendo-Knockout - how to bind AutoComplete to remote data?Kendo-Knockout - 如何将自动完成绑定到远程数据？
【发布时间】：2013-02-13 20:13:19
【问题描述】：

我使用 Kendo-Knockout。

我正在尝试让自动完成功能绑定到远程数据。使用http://rniemeyer.github.com/knockout-kendo/web/AutoComplete.html 的基本示例，我尝试了以下方法。但是，在输入失去焦点之前，搜索不会更新。

"search" 仅在 observableArray 中已经查找某些内容。

Kendo Autocomplete 提供的唯一事件是“change”，它只会在输入失去焦点后再次触发。

您将如何拦截按键，并访问 search() 的值以便进行远程调用？

此外，一旦项目被选中，您将如何访问 'id' 的值？

谢谢杰里米

<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());
});

【问题讨论】：

标签： knockout.js kendo-ui

【解决方案1】：

可以这样做：

<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 }" />

您可以将其存储在 JavaScript 对象中并指向它。

示例：http://jsfiddle.net/rniemeyer/m8vVA/

【讨论】：

非常感谢 - 我没有意识到您可以将数据源发送到绑定。但是，现在的问题是如何将值返回到 selectedChoice 而不是 Text。我想出了这个：jsfiddle.net/jeremyholt/EVUL9 但我认为这很可怕。（我绑定到一个 SelectListItem）。有没有更优雅的方式来做到这一点？
我希望有一种超级优雅的方式来做到这一点，但 Kendo API 并不完全支持它。这是一种更简洁的方法：jsfiddle.net/rniemeyer/Rx6Ux

【解决方案2】：

以下剔除绑定允许在视图模型中更改搜索过滤器的实时更新：

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

value 是选定的值，suggestions 是一个可观察的数组，你可以用结果填充，onSuggestionsChanged 是你的 viewmodel 中的一个函数，每次用户更改字段中的文本时都会调用它。

Kendo UI Filter event description

【讨论】：