清除选择更改事件的自动完成值答案

【问题标题】：Clear autocomplete value on select change event清除选择更改事件的自动完成值
【发布时间】：2012-11-15 01:38:06
【问题描述】：

我有以下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(""); 
    }
});

【问题讨论】：

标签： kendo-ui

【解决方案1】：

您的代码清除了输入，但 select 事件提前触发并且值在之后添加。你需要做的是清除change事件的输入：

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

【讨论】：

Ta，应该多考虑一下：
还找到了一种更好的清洁方式，但仍会将其保留为已接受的答案...
@Rippo 确实是不错的解决方案，因为此外，如果字段在没有选择值的情况下失去焦点（这会触发更改事件而不是选择事件），它不会丢失先前的值...
顺便说一句，您无需在 DOM 中搜索元素即可在事件处理程序中检索对小部件的引用。在事件处理程序的第一个参数中传递了一个引用：e.sender。所以代码是：e.sender.clear("")。这不仅更容易，而且更快！
修正@KevinBabcock 的评论：e.sender.value(""); 会起作用。

【解决方案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/

【讨论】：

【解决方案3】：

select: function(e) {

.... e.preventDefault();

}

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：