HTML5 Web app開發(fā)工具Kendo UI Web中，AutoComplete提供了基于輸入文本的提示功能，同時(shí)也允許多值條目。通過AutoComplete顯示的提示可以來自本地的數(shù)組也可以是遠(yuǎn)程的數(shù)據(jù)服務(wù)。下面來看看如何應(yīng)用這個(gè)Kendo UI Web中的AutoComplete功能。

創(chuàng)建一個(gè)HTML輸入元素

<input id="autoComplete" />

使用jQuery選擇器初始化AutoComplete

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

    在這里，小部件可以復(fù)制任何的樣式和來自輸入元素的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 提示

    目前主要有兩種方法可以提供自動(dòng)完成提示。

• 從一個(gè)本地的數(shù)組
• 從一個(gè)遠(yuǎn)程的數(shù)組服務(wù)器

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

1、本地提示

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

直接在構(gòu)造函數(shù)上初始化提示：

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

2、遠(yuǎn)程提示

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

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

使用OData遠(yuǎn)程提示

$(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);

訪問一個(gè)現(xiàn)有的 AutoComplete

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

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