自动完成以在用户开始输入之前列出所有可用的属性答案

【问题标题】：autocomplete to list all available properties before the user starts typing自动完成以在用户开始输入之前列出所有可用的属性
【发布时间】：2013-10-10 09:08:04
【问题描述】：

自动完成的默认行为是输入字段为空，并在用户开始输入时开始列出数据。我希望所有数据在开始时都作为下拉列表列出，以便用户可以看到所有可用选项。有没有可能：

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/

【问题讨论】：

自动完成小部件不支持此功能。但是，您可以订阅输入的焦点事件并调用 search 方法的修改版本 (kendoui.com/forums/kendo-ui-web/autocomplete/…)，这将打开包含所有值的下拉列表。
如果您想要所有选项的可见列表，请使用带有size 属性的<select>，而不是让其他小部件以不寻常的方式运行。
@Tomalak，您能否提供一个非常简单的演示来说明您的意思，例如在我的提琴手中，我已附上。谢谢！
我说的是旧的 <select size="3"> 元素，其中包含 <option> s。这些可以通过淘汰赛的options binding 创建。我确信我不需要用勺子喂你一个例子。 ;) — 由于 Kendo 似乎没有提供自己的多行选择小部件，您可以使用 ComboBox widget 并将 isOpen 属性绑定到 true：<input data-bind="kendoComboBox: { data: choices, value: selectedChoice, isOpen: true }" />

标签： knockout.js kendo-ui

【解决方案1】：

您可以通过将focus 事件添加到HTML 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/

【讨论】：

您发布的示例似乎不起作用。当您关注它时，它不会列出所有元素。