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

您的代码会清除输入，但是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(""); 
    }
});

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

选择更改事件时清除自动完成值

5 个答案: