knockout.js - autocomplete to list all available properties before the user starts typing

Question

The default behavior of the autocomplete is the input field to be empty and to start listing data when the user starts typing. I want all the data to be listed as a dropdown in the beginning so the user can see all the available options. Is that possible:

html:

<input data-bind="kendoAutoComplete: { data: choices, value: selectedChoice }" />
<hr/>
Selected: <strong data-bind="text: selectedChoice"> </strong>

javascript:

var ViewModel = function() {
   this.choices = ko.observableArray(["apple", "orange", "banana"]);
   this.selectedChoice = ko.observable();
};

ko.applyBindings(new ViewModel());

jsfiddle: http://jsfiddle.net/2Qnv7/94/

Answer 1

您可以通过向focusHTML 添加事件input然后调用autocomplete.popup.open()

例子：

HTML：

<input id="autocomplete" data-bind="kendoAutoComplete: { data: choices, value: selectedChoice }" />
<hr/>
Selected: <strong data-bind="text: selectedChoice"> </strong>

JavaScript

var ViewModel = function() {
    this.choices = ko.observableArray(["apple", "orange", "banana"]);
    this.selectedChoice = ko.observable();
};

ko.applyBindings(new ViewModel());
$("#autocomplete").on("focus", function() {
    var autocomplete =    $("#autocomplete").data("kendoAutoComplete");
    autocomplete.popup.open();
});

和这里的 JSFiddle：http: //jsfiddle.net/OnaBai/2Qnv7/101/