CODEWITHSUNDEEP
knockout.jskendo-ui
Mdb
Mdb

Reputation: 8568

autocomplete to list all available properties before the user starts typing

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/

Upvotes: 2

Views: 857

Answers (1)

OnaBai
OnaBai

Reputation: 40897

You might do the trick by adding a focus event to the HTML input and then invoke autocomplete.popup.open()

Example:

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

and the JSFiddle here : http://jsfiddle.net/OnaBai/2Qnv7/101/

Upvotes: 1

Related Questions