Kendo autocomplete
HTML
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css">
<div data-role="view" id="mainView" data-init="loadListView" data-title="Scroll down to load">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>
</div>
</header>
<ul id="listView"></ul>
</div>
<script type="text/x-kendo-template" id="listviewTemplate">
<a > <strong > #:name# </strong>
<i> #:age#</i></a>
</script>
JavaScript
var app = new kendo.mobile.Application(document.body);
//create datasource
var movieDataSource = new kendo.data.DataSource({
data: [{
name: "Jane Doe",
age: "30",
letter: "A",
groupHeader: "A"
}, {
name: "John Doe",
age: "33",
letter: "B",
groupHeader: "B"
}]
});
//instantiate the list view
function loadListView() {
$("#listView").kendoMobileListView({
dataSource: movieDataSource,
template: $("#listviewTemplate").html(),
filterable: {
field: "age",
operator: "startswith"
},
group: {
field: "groupHeader"
}
});
}