clear kendo autocomplete

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<p>
  <label for="input" class="info">Search:</label>
  <input id="input" />
  <button id='clear'>clear</button>
</p>
<div id='grid'></div>

JavaScript

$(document).ready(function () {    
    var ds = new kendo.data.DataSource({data: createRandomData(50)})

    //create AutoComplete UI component
    var autoComplete = $("#input").kendoAutoComplete({
        dataSource: ds,
        dataTextField: 'FirstName',
        filter: "contains",
        placeholder: "Search by First Name..."
    });
    var grid = $('#grid').kendoGrid({
        dataSource: ds,
        columns: [
            {field: 'FirstName', title: 'First Name'}
        ]
    });
    $('#clear').click(function (e) {
        e.preventDefault();
        autoComplete.data("kendoAutoComplete").value('');
        ds.filter({});
    });
});