Animations to be used for opening/closing the popup. Setting to false will turn of the animation.

//autocomplete initialization
 <script>
     $("#autocomplete").kendoAutoComplete({
         dataSource: dataSource,
         animation: {
            close: {
                effects: "fadeOut",
                duration: 300,
                hide: true
                show: false
            }
         }
     });
 </script>

//autocomplete initialization
 <script>
     $("#autocomplete").kendoAutoComplete({
         dataSource: dataSource,
         animation: {
            open: {
                effects: "fadeIn",
                duration: 300,
                show: true
            }
         }
     });
 </script>

The set of data that the AutoComplete will be bound to. Either a local JavaScript object, or an instance of the Kendo UI DataSource.

var items = [ { Name: "Item 1" }, { Name: "Item 2"} ];
$("#autoComplete").kendoAutoComplete({ dataSource: items });

$("#autocomplete").kendoAutoComplete({
    dataSource: new kendo.data.DataSource({
        transport: {
            read: "Items/GetData" // url to server method which returns data
        }
    });
});

Sets the field of the data item that provides the text content of the list items.

var items = [ { ID: 1, Name: "Item 1" }, { ID: 2, Name: "Item 2"} ];
$("#autoComplete").kendoAutoComplete({
    dataSource: items,
    dataTextField: "Name"
});

Specifies the delay in ms after which the AutoComplete will start filtering the dataSource.

// set the delay to 500 milliseconds
$("#autoComplete").kendoAutoComplete({
    delay: 500
});

Controls whether the AutoComplete should be initially enabled.

// disable the autocomplete when it is created (enabled by default)
$("#autoComplete").kendoAutoComplete({
    enable: false
});

Defines the type of filtration. This value is handled by the remote data source.

// send a filter value of 'contains' to the server
$("#autoComplete").kendoAutoComplete({
    filter: 'contains'
});

Sets the height of the drop-down list in pixels.

// set the height of the drop-down list that appears when the autocomplete is activated to 500px
$("#autoComplete").kendoAutoComplete({
    height: 500
});

Controls whether the first item will be automatically highlighted.

$("#autocomplete").kendoAutoComplete({
    highlightFirst: false //no of the suggested items will be highlighted
});

Defines whether the filtration should be case sensitive.

$("#autoComplete").kendoAutoComplete({
    filter: 'contains',
    ignoreCase: false //now filtration will be case sensitive
});

Specifies the minimum number of characters that should be typed before the AutoComplete queries the dataSource.

// wait until the user types 3 characters before querying the server
$("#autoComplete").kendoAutoComplete({
    minLength: 3
});

A string that appears in the textbox when it has no value.

//autocomplete initialization
 <script>
     $("#autocomplete").kendoAutoComplete({
         dataSource: dataSource,
         placeholder: "Enter value..."
     });
 </script>

<input id="autocomplete" placeholder="Enter value..." />

 //combobox initialization
 <script>
     $("#autocomplete").kendoAutoComplete({
         dataSource: dataSource
     });
 </script>

Sets the separator for completion. Empty by default, allowing for only one completion.

// set completion separator to ,
$("#autoComplete").kendoAutoComplete({
    separator: ", "
});

Controls whether the AutoComplete should automatically auto-type the rest of text.

// turn on auto-typing (off by default)
$("#autoComplete").kendoAutoComplete({
    suggest: true
});

Template to be used for rendering the items in the list.

//template

<script id="template" type="text/x-kendo-tmpl">
      # if (data.BoxArt.SmallUrl) { #
          <img src="${ data.BoxArt.SmallUrl }" alt="${ data.Name }" />Title:${ data.Name }, Year: ${ data.Name }
      # } else { #
          <img alt="${ data.Name }" />Title:${ data.Name }, Year: ${ data.Name }
      # } #
 </script>

 //autocomplete initialization
 <script>
     $("#autocomplete").kendoAutoComplete({
         dataSource: dataSource,
         dataTextField: "Name",
         template: kendo.template($("#template").html())
     });
 </script>