外围海尊体育足球网

    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");