kendo-ui - 清除选择更改事件的自动完成值

Question

我有以下http://jsfiddle.net/TgBzB/3/并希望在用户选择项目时清除自动完成字段。以下代码不这样做： -

$("#input").data("kendoAutoComplete").value("");

这可能吗？

//create AutoComplete UI component
$("#input").kendoAutoComplete({
    dataSource: data,
    filter: "startswith",
    placeholder: "Select country...",
    select: function(e) {
        var dataItem = this.dataItem(e.item.index());
        $('#list').append("<li>" + dataItem + "</li>");
        //How do I clear the #input here?
        $("#input").data("kendoAutoComplete").value(""); 
    }
});

Answer 1

您的代码会清除输入，但选择事件会提前触发并在之后添加值。您要做的是清除changeevent 的输入：

$("#input").kendoAutoComplete({
    dataSource: data,
    filter: "startswith",
    placeholder: "Select country...",
    select: function(e) {
        var dataItem = this.dataItem(e.item.index());
        $('#list').append("<li>" + dataItem + "</li>");
    },
    change: function(e) {
        $("#input").data("kendoAutoComplete").value(""); 
    }
}); 

Answer 2

这也是另一种同样有效的替代方法，而不是在更改事件后清除它，只需通过使用来阻止它首先显示e.preventDefault();

...
select: function(e) {
        var dataItem = this.dataItem(e.item.index());
        $('#list').append("<li>" + dataItem + "</li>");
        $("#input").data("kendoAutoComplete").value("");
        e.preventDefault();
}
...

已更新 jsFiddle http://jsfiddle.net/rippo/TgBzB/8/

Answer 3

select: function(e) {

.... e.preventDefault();

}

不允许您搜索相同的关键字（立即输入）。如果您逐个字符地键入相同的关键字并给出几毫秒的时间，它将起作用。

Answer 4

即使您使用 MVVM 绑定到多选值，这也可以正常工作。

select: function(e) {
    var widget = $('#widgetId').data('kendoMultiSelect');
    widget.input.val('');
}

Answer 5

只需使用它，您就可以清除自动完成

       $("#autoCompleteName").val("");