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

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

6028

2017-11-27 12:20

起源

答案:

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

2017-11-27 13:50

Ta，应该多考虑一下这个： - Rippo

还找到了一种更清洁的方式，但仍然会将此作为公认的答案...... - Rippo

@Rippo确实是一个很好的解决方案，因为如果字段在没有选择值的情况下松开焦点（触发更改事件而不是选择事件），它不会丢失先前的值... - Samuel Caillerie

顺便说一句，您不需要在DOM中搜索元素以检索事件处理程序中对窗口小部件的引用。引用在事件处理程序的第一个参数中传递： e.sender。所以代码是： e.sender.clear("")。这不仅更容易，而且更快！ - Kevin Babcock

Correcion @ KevinBabcock的评论： e.sender.value(""); 将工作。 - James Reategui

答案:

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

2017-11-27 13:50

Ta，应该多考虑一下这个： - Rippo

还找到了一种更清洁的方式，但仍然会将此作为公认的答案...... - Rippo

Correcion @ KevinBabcock的评论： e.sender.value(""); 将工作。 - James Reategui

这也是另一种同样有效的替代方案，而不是在更改事件之后清除它，而只是通过使用来阻止它显示在第一位 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/

2018-04-25 12:06

select: function(e) {

.... e.preventDefault（）;

}

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

2018-06-10 11:51

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

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

2018-02-22 12:54

只需使用此选项即可清除自动完成状态

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

-3

2017-10-07 09:44

不会工作！如果有多个元素 - Asif

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

答案:

答案:

热门问题

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