Xóa giá trị tự động hoàn thành trên sự kiện thay đổi được chọn

Question

Tôi có http://jsfiddle.net/TgBzB/3/ sau đây và muốn xóa trường tự động hoàn tất khi người dùng đã chọn một mục. Mã sau đây không thực hiện việc này: -

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

Điều này có thể không?

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

Mã của bạn xóa đầu vào, nhưng sự kiện chọn sẽ kích hoạt sớm và giá trị được thêm vào sau đó. Những gì bạn phải làm là để xóa các đầu vào tại change sự kiện:

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

Đây cũng là một lựa chọn mà chỉ hoạt động là tốt, thay vì thanh toán bù trừ nó sau khi một sự kiện thay đổi chỉ đơn giản là ngăn chặn nó hiển thị ở vị trí đầu tiên bằng cách sử dụng e.preventDefault();

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

đã cập nhật các jsFiddle http://jsfiddle.net/rippo/TgBzB/8/

Answer 3

Đơn giản chỉ cần dùng này, bạn có thể xóa tự động hoàn toàn

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

Answer 4

select: function(e) { 

.... e.preventDefault();

}

sẽ không cho phép bạn tìm kiếm cùng một từ khóa (gõ ngay lập tức). nó sẽ hoạt động nếu bạn gõ cùng một ký tự từ khóa theo ký tự với thời gian một số mili giây.

Answer 5

Điều này làm việc tốt ngay cả khi bạn sử dụng MVVM ràng buộc với giá trị đa lựa chọn.

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