// AutoComplete (basic usage)
var countries = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan", "Belarus", "Belgium", "Bosnia & Herzegovina", "Bulgaria", "Croatia", "Cyprus", "Czech Republic", "Denmark", "Estonia", "Finland", "France", "Georgia", "Germany", "Greece", "Hungary", "Iceland", "Ireland", "Italy", "Kosovo", "Latvia", "Liechtenstein", "Lithuania", "Luxembourg", "Macedonia", "Malta", "Moldova", "Monaco", "Montenegro", "Netherlands", "Norway", "Poland", "Portugal", "Romania", "Russia", "San Marino", "Serbia", "Slovakia", "Slovenia", "Spain", "Sweden", "Switzerland", "Turkey", "Ukraine", "United Kingdom", "Vatican City"];

var countriesDS = new kendo.data.DataSource({
  data: countries
});

var getFilters = function (filter) {
  var filters = [];
  filters.push(filter);
  values = autoComplete.value().split(", ");
  values.pop();
  $.each(values, function (index, item) {
    filters.push({field: "", ignoreCase: true, operator: "neq", value: item});
  });
  return filters;
};

var autoComplete = $(selector).kendoAutoComplete({
  filter: "startswith",
  placeholder: "Select country...",
  separator: ", ",
  dataSource: {
    transport: {
      read: function (options, operation) {
        countriesDS.read();
        countriesDS.filter({logic: "and", filters: getFilters(options.data.filter.filters[0])});
        options.success(countriesDS.view());
      }
    },
    serverFiltering: true
  }
}).data("kendoAutoComplete");

// AutoComplete (custom template)
$(selector).kendoAutoComplete({
  minLength: 2,
  dataTextField: "ContactName",
  template:
    '<div class="k-list-wrapper">'+
      '<span class="k-state-default k-list-wrapper-addon">' +
          '<img src=\"assets/img/avatars/avatar#:data.CustomerID#.png\" alt=\"#:data.CustomerID#\" />' +
      '</span>' +
      '<span class="k-state-default k-list-wrapper-content">' +
          '<p>#: data.ContactName #</p>' +
          '<span class="uk-text-muted uk-text-small">#: data.CompanyName #</span>' +
      '</span>' +
    '</div>',
  dataSource: {
  transport: {
    read: {
      dataType: "json",
        url: "data/autocomplete_data.json"
      }
    }
  },
  height: 204
}).data("kendoAutoComplete");