AutoComplete Widget In Kendo UI

To explain how to work with AutoComplete widget in Kendo UI, I’m going to use the following API which I have created from my previous article,

1. api/department

GET: api/department response as shown in figure 1,



Create an HTML page in your project, in my case I named it KendoAutoComplete.html.

Design in KendoAutoComplete.html

JavaScript

Events in Kendo Autocomplete widget

The main events in Kendo Autocomplete widget is listed below:

1. Databound
2. Change
3. Open
4. Close
5. Select

Databound: This event is fired when the kendo Autocomplete is bound to data from its data source.

HTML

1. <input data-role="autocomplete"
2. data-placeholder="Department"
4. data-text-field="DepartmentName"
5. data-bind="value: selectedProduct,
6. source: products,
7. visible: isVisible,
8. enabled: isEnabled,events:{dataBound:AutoComplete_Bound}"
9. style="width: 100%;" />

JavaScript

1. AutoComplete_Bound:function(e)
2. {
3. e.preventDefault();
4. alert("DataBaound")
6. },

Result in Browser

Change Event: This event in Kendo AutoComplete is fired when the value of the widget is changed by user.

HTML Design

1. <input data-role="autocomplete"
2. data-placeholder="Department"
4. data-text-field="DepartmentName"
5. data-bind="value: selectedProduct,
6. source: products,
7. visible: isVisible,
8. enabled: isEnabled,events:{change:AutoComplete_Change}"
9. style="width: 100%;" />

JavaScript

1. AutoComplete_Change:function(e)
2. {
3. e.preventDefault();
4. alert("Change Event")
5. },

Result in Browser

Open Event: This event is fired when the items in the widget is opened.

HTML

1. <input data-role="autocomplete"
2. data-placeholder="Department"
4. data-text-field="DepartmentName"
5. data-bind="value: selectedProduct,
6. source: products,
7. visible: isVisible,
8. enabled: isEnabled,events:{open:AutoComplete_Open}"
9. style="width: 100%;" />

JavaScript

1. AutoComplete_Open:function(e)
2. {
3. e.preventDefault();
4. alert("Open Event")
5. },

Result in Browser

Close Event: This event is fired when the items in the widget is closed.

HTML

1. <input data-role="autocomplete"
2. data-placeholder="Department"
4. data-text-field="DepartmentName"
5. data-bind="value: selectedProduct,
6. source: products,
7. visible: isVisible,
8. enabled: isEnabled,events:{close:AutoComplete_Close}"
9. style="width: 100%;" />

JavaScript

1. AutoComplete_Close:function(e)
2. {
3. e.preventDefault();
4. alert("Close Event")
5. },

Result in Browser

Select Event: This event is fired when an item from the AutoComplete box is selected by the user.

HTML

1. <input id="AutoFill_ID" data-role="autocomplete"
2. data-placeholder="Department"
3. data-selectable="true"
5. data-text-field="DepartmentName"
6. data-bind="value: selectedProduct,
7. source: products,
8. visible: isVisible,
9. enabled: isEnabled,events:{select:AutoComplete_Select}"
10. style="width: 100%;" />

JavaScript

1. AutoComplete_Select:function(e)
2. {
3. var item = e.sender.dataItem(e.item.index());
4. viewModel.set("selectedPerson", item);
5. alert(item.DepartmentName);
6. },

Result in Browser

Here is the complete code: