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

时间:2013-10-10 09:08:04

标签: knockout.js kendo-ui

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

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/

1 个答案:

答案 0 :(得分:1)

您可以通过向HTML focus添加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/