HTML5 Web app開發工具Kendo UI Web中，AutoComplete提供了基于輸入文本的提示功能，同時也允許多值條目。通過AutoComplete顯示的提示可以來自本地的數組也可以是遠程的數據服務。下面來看看如何應用這個Kendo UI Web中的AutoComplete功能。

創建一個HTML輸入元素

<input id="autoComplete" />

使用jQuery選擇器初始化AutoComplete

$(document).ready(function() { $("#autoComplete").kendoAutoComplete(["Item1", "Item2"]); });

    在這里，小部件可以復制任何的樣式和來自輸入元素的CSS類到wrapper元素上。

<input id="autoComplete" class="myClass" />

results to:

<span class="k-widget k-autocomplete k-header k-state-default myClass">
    <input id="autoComplete" class="myClass" />
</span>

AutoComplete 提示

    目前主要有兩種方法可以提供自動完成提示。

• 從一個本地的數組
• 從一個遠程的數組服務器

    本地定義的值對于小的、固定的提示比較適合。遠程提示的話，就比較適用于大的數據集。當使用數據源組件的時候，過濾大型的遠程數據服務將會被推送到服務器，并最大化客戶端性能。

1、本地提示

    配置并提供本地的AutoComplete提示，你可以之間傳遞一個數組到它的構造函數或者是你可以設置數據源屬性到一個本地的數組。

直接在構造函數上初始化提示：

$("#autoComplete").kendoAutoComplete(["Item1", "Item2", "Item3"]);
使用數據源屬性來綁定到本地數組
var data = ["Item1", "Item2", "Item3"];
$("#autoComplete").kendoAutoComplete({
   dataSource: data
});

2、遠程提示

    要綁定一個AutoComplete到遠程提示最簡單的方法就是使用數據源組件，一個對于本地和遠程數據的抽象。這個數據源組件可以用于服務來自不同數據服務器的數據，比如XML、JSON、 and JSONP。

使用Kendo UI Web的DataSource組件綁定：

使用OData遠程提示

$(document).ready(function(){
 $("#autoComplete").kendoAutoComplete({
  minLength: 3,
  dataTextField: "Name", // JSON property name to use
  dataSource: new kendo.data.DataSource({
   type: "odata", // specifies data protocol
   pageSize: 10, // limits result set
   transport: {
    read: "//odata.netflix.com/Catalog/Titles"
   }
  })
 })
});

使用Kendo UI Web 的DataSource綁定到JSONP：

提示

$(document).ready(function(){
 $("#autoComplete").kendoAutoComplete({
  minLength:6,
  dataTextField:"title",
  filter: "contains",
  dataSource: new kendo.data.DataSource({
   transport: {
    read: {
     url: "//api.geonames.org/wikipediaSearchJSON",
     data: {
      q: function(){
       return $("#autoComplete").data("kendoAutoComplete").value();
      },
      maxRows: 10,
      username: "demo"
     }
    }
   },
   schema: {
    data:"geonames"
   }
  }),
  change: function(){
   this.dataSource.read();
  }
 })
});

自定義下拉列表的寬度

var autoComplete = $("#autoComplete").data("kendoAutoComplete");

// set width of the drop-down list
autoComplete.list.width(400);

訪問一個現有的 AutoComplete

    通過jQuery.data()可以引用一個現有的AutoComplete實例，一旦建立了一個引用，你就可以使用API來控制它的行為了。

var autoComplete = $("#autoComplete").data("kendoAutoComplete");