Очистить значение автозаполнения в событии выбора изменения

У меня есть 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(""); 
    }
});

Ответы

Ответ 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(""); 
    }
});

Ответ 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 для значения multiselect.

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

Ответ 5

Просто используя это, вы можете очистить автообновление

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