MVVM AutoComplete attribute binding (animation)

by grippstick

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.metro.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id='container'>
<input data-placeholder='Clinic name filter...' data-role="autocomplete"  
    data-animation='{"open":{"show":false}}'
                    data-text-field="Title" data-bind="source: clinicDS, value: ID"  />
    <div data-role='listview' data-bind='source:clinicDS' data-template='template'/>
</div>

<script id="template" type="text/x-kendo-template">
    <div>
            <span data-bind='text:ID'/>
            <span data-bind='text:Name'/>
</div>
</script>

JavaScript

var viewModel = new kendo.observable({
    clinicDS: new kendo.data.DataSource({
        transport: {
            read: {
                //using jsfiddle echo service to simulate JSON endpoint
                url: "/echo/json/",
                dataType: "json",
                type: "POST",
                data: {
                    // /echo/json/ echoes the JSON which you pass as an argument
                    json: JSON.stringify([
                        {
                        "ID": 1,
                        "Name": "\tAvatar (2009)\t",
                        "Revenue": 760505847},
                    {
                        "ID": 2,
                        "Name": "\tTitanic (1997)\t",
                        "Revenue": 600779824},
                    {
                        "ID": 3,
                        "Name": "\tThe Avengers (2012)\t",
                        "Revenue": 599387534},
                    {
                        "ID": 4,
                        "Name": "\tThe Dark Knight (2008)\t",
                        "Revenue": 533316061}
                    ])
                }
            }
        }
    })
});
kendo.bind($('#container'), viewModel);