Kendo UI Web – AutoCompleteBox

In this post we would see how we can use Kendo UI AutoCompleteBox.

Before we start, you need to add the necessary javascript and stylesheet files. The following image shows that the minimum javascript and stylesheet files used.


We will have a simple example where, an input tag is converted to Kendo AutoCompleteBox and the source is set to a collection.


The above code shows that, we have a collection as weekDays. Then using the kendoAutoComplete method we convert the input tag to a Kendo AutoCompleteBox.

The following output shows that, we have created a Kendo AutoCompleteBox.


Another way of converting Kendo AutoCompleteBox is by using the attributes required. As you see in the following html code; we have added attributes to the input tag such as data-role and data-source. The required values are assigned to the attributes and then the kendo.init() method uses the jquery element to initialize the AutoCompleteBox.


The output of the above is also the same as before.


Displaying data from an object collection

In real time scenarios, data might be a collection of object. In that case we can bind the data as Kendo is fully supported by Knock out. In the following code we are using the data-bind attribute for binding the value and source properties of the data. Notice that, the dataTobind is supplied with the kendo.bind() method


Running the above code would bring the following output. You can see that, the data is not displayed properly, instead object object is displayed.


To fix that, we have an attribute as data-text-field which is assigned to the value we are going to display.

And finally we are displaying the data as expected.


Hope this post is useful.

Like Method Of Tried in Facebook.