AutoComplete Widget In Kendo UI

Gowtham K
9y
5k
0
0

Article

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,

ASP.NET WEB API with Entity Framework 6 code first technique - Part 2

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div id="example">
<input data-role="autocomplete"
data-placeholder="Department"
data-text-field="DepartmentName"
data-bind="value: selectedProduct,
source: products,
visible: isVisible,
enabled: isEnabled"
style="width: 100%;" />
</div>
</body>
</html>

JavaScript

$(document).ready(function () {
var viewModel = kendo.observable({
selectedProduct: null,
isVisible: true,
isEnabled: true,
products: new kendo.data.DataSource({
transport: {
read: {
url: "api/Departments",
dataType: "json"
}
}
})
})
kendo.bind($("#example"), viewModel);
})

Result in Browser

Events in Kendo Autocomplete widget

The main events in Kendo Autocomplete widget is listed below:

Databound
Change
Open
Close
Select

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

HTML

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

JavaScript

AutoComplete_Bound:function(e)
{
e.preventDefault();
alert("DataBaound")
},

Result in Browser

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

HTML Design

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

JavaScript

AutoComplete_Change:function(e)
{
e.preventDefault();
alert("Change Event")
},

Result in Browser

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

HTML

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

JavaScript

AutoComplete_Open:function(e)
{
e.preventDefault();
alert("Open Event")
},

Result in Browser

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

HTML

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

JavaScript

AutoComplete_Close:function(e)
{
e.preventDefault();
alert("Close Event")
},

Result in Browser

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

HTML

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

JavaScript

AutoComplete_Select:function(e)
{
var item = e.sender.dataItem(e.item.index());
viewModel.set("selectedPerson", item);
alert(item.DepartmentName);
},

Result in Browser

Here is the complete code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div id="example">
<input id="AutoFill_ID" data-role="autocomplete"
data-placeholder="Department"
data-selectable="true"
data-text-field="DepartmentName"
data-bind="value: selectedProduct,
source: products,
visible: isVisible,
enabled: isEnabled,events:{dataBound:AutoComplete_Bound,change:AutoComplete_Change,
open:AutoComplete_Open,close:AutoComplete_Close,select:AutoComplete_Select}"
style="width: 100%;" />
</div>
<script>
$(document).ready(function () {
var viewModel = kendo.observable({
selectedProduct: null,
isVisible: true,
isEnabled: true,
selectedPerson: {},
AutoComplete_Select:function(e)
{
var item = e.sender.dataItem(e.item.index());
viewModel.set("selectedPerson", item);
alert(item.DepartmentName);
},
AutoComplete_Bound:function(e)
{
e.preventDefault();
alert("DataBaound")
},
AutoComplete_Change:function(e)
{
e.preventDefault();
alert("Change Event")
},
AutoComplete_Open:function(e)
{
e.preventDefault();
alert("Open Event")
},
AutoComplete_Close:function(e)
{
e.preventDefault();
alert("Close Event")
},
products: new kendo.data.DataSource({
transport: {
read: {
url: "api/Departments",
dataType: "json"
}
}
})
})
kendo.bind($("#example"), viewModel);
})
</script>
</body>
</html>

I hope you enjoyed this article. Your valuable feedback, question, or comments about this article are always welcomed.