Kendo UI自动完成自定义绑定

时间:2013-11-18 10:26:25

标签: html5 kendo-ui kendo-autocomplete

我有服务,它给了我用户在搜索TextBox中输入的前10条结果记录。所以在文本框的按键上有调用我的服务。在这里我使用KendoUI自动完成,所以问题是我的服务获取调用自动完成定义之前。任何人都有想法吗?

<input data-bind="value: searchString, valueUpdate: 'afterkeydown'"  placeholder="Search me.."/>
searchString: ko.computed({
        read: function () { },
        write: function (val) {            
           BindAutoTextBox(val);
            return false;
        }
    }).extend({ throttle: 1000 }),

function BindAutoTextBox(val){

 ServiceHelper.getData('search/users?SearchText='+val, function (data) {     

        $("#LeftSearch").kendoAutoComplete({
            dataSource: {
                data: data
            },
            dataTextField: "User_Code",
            template: '<table width="100%"><tr><td width="20%" valign="top">#:User_Code#</td><td width="30%" valign="top">#:Full_Name#</td><td width="30%" 

valign="top">#:Group_Name#</td></tr></table>'

        });

        var autoComplete = $("#LeftSearch").data("kendoAutoComplete");
        // set width of the drop-down list
        autoComplete.list.width(355);

    }, null, 'http://abc/ApplicationRestService/', 'Users');

}

任何人都可以在简短的详细代码中给我解决方案吗?

2 个答案:

答案 0 :(得分:2)

我使用自动完成kendoUI的setDataSource找到了我的解决方案,您可以从服务中更改数据源,这将在按键上调用...

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  dataSource: [ "Apples", "Oranges" ]
});
var dataSource = new kendo.data.DataSource({
  data: [ "Bananas", "Cherries" ]
});
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.setDataSource(dataSource);
</script>



 $("#autocomplete").keyup(function (e) {

    var autocomplete = $("#autocomplete").data("kendoAutoComplete");
     dataSource = new kendo.data.DataSource({
                        data: ["Apples", "Oranges","Bananas", "Cherries"]
                    });
     autocomplete.setDataSource(dataSource);                

});

答案 1 :(得分:0)

我正在从我的ipad输入此内容,因此我暂时无法提供任何示例代码,但您似乎正在倒退。您自己要求服务器提供数据,然后使用结果创建一个kendo自动完成。此外,每次在框中输入文本时,都会创建自动完成功能。使用kendo的正确方法是在页面加载并设置其数据源以查询服务器时创建自动完成。您根本不需要敲除代码或getData函数。当字符单独输入到输入框中时,自动完成窗口小部件将使用其数据源获取数据。 请查看http://demos.kendoui.com/web/autocomplete/index.html

上的示例