Clear autocomplete value on select change event

Question

I have the following http://jsfiddle.net/TgBzB/3/ and want to clear the autocomplete field when the user has selected an item. The following code does not do this:-

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

Is this possible?

//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

This is also another alternative which works just as well, instead of clearing it after a change event simply stop it from showing in first place by using e.preventDefault();

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

Have updated the jsFiddle http://jsfiddle.net/rippo/TgBzB/8/

Answer 2

Your code clears the input, but the select event fires to early and the value is added after. What you have to do is to clear the input at change event :

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