kendoAutoComplete clear
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<div id="content">
<span>First name :</span>
<input id="getPersonListByFirstName"
data-role="autocomplete"
data-text-field="Description"
data-bind="source: datas, value: nom" />
<br/>
<br/>
<span>Last name :</span>
<input id="getPersonListByLastName"
data-role="autocomplete"
data-text-field="Description"
data-bind="source: datas, value: prenom" />
<br/>
<span data-bind="text: nom"></span>
<br/>
<span data-bind="text: prenom"></span>
</div>
<input id="reset" type="button" value="initialize">
JavaScript
var listPerson = [{
"Id": 13896,
"FirstName": "Mathieu",
"LastName": "Beland",
"Description": "Mathieu Beland"},
{
"Id": 13897,
"FirstName": "Michel",
"LastName": "Brisebois",
"Description": "Michel Brisebois"},
{
"Id": 13898,
"FirstName": "Tristan",
"LastName": "Dube",
"Description": "Tristan Dube"},
{
"Id": 13899,
"FirstName": "ROBERT M.",
"LastName": "GRANATSTEIN",
"Description": "ROBERT M. GRANATSTEIN"},
{
"Id": 13900,
"FirstName": "JEFFREY R.",
"LastName": "LLOYD",
"Description": "JEFFREY R. LLOYD"},
{
"Id": 13901,
"FirstName": "GIBSON",
"LastName": "BROCK",
"Description": "GIBSON BROCK"},
{
"Id": 13902,
"FirstName": "ROBERT",
"LastName": "GRANATSTEIN",
"Description": "ROBERT GRANATSTEIN"},
{
"Id": 13903,
"FirstName": "CASSELS & GRAYDON LLP",
"LastName": "BLAKE",
"Description": "CASSELS & GRAYDON LLP BLAKE"}];
var viewModel = kendo.observable({
datas: listPerson,
nom: null,
prenom: null
});
kendo.bind($('#content'), viewModel);
$("#reset").click(function() {
viewModel.set("nom", viewModel.datas[1].FirstName);
viewModel.set("prenom", viewModel.datas[1].LastName);
});