本文是Kendo UI AutoComplete的續(xù)篇，主要介紹數(shù)據(jù)源、搜索、占位符等API元素。

dataSource Object|Array|kendo.data.DataSource

如果 dataSource選項設(shè)置為JavaScript對象或數(shù)組，組件會初始化一個新的kendo.data.DataSource。如果dataSource選項是當前存在的kendo.data.DataSource，組件會繼續(xù)沿用這個數(shù)據(jù)源，而不會重新初始化。

示例：將數(shù)據(jù)源設(shè)置為JavaScript對象

<input id="autocomplete" />
<script>
$("#autoComplete").kendoAutoComplete({
  dataSource: {
    data: ["One", "Two"]
  }
});
</script>

示例：將數(shù)據(jù)源設(shè)置為JavaScript數(shù)組

<input id="autocomplete" />
<script>
var data = ["One", "Two"];
$("#autoComplete").kendoAutoComplete({
  dataSource: data
});
</script>

示例：當前存在的數(shù)據(jù)源

<input id="autocomplete" />
<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "//demos.telerik.com/kendo-ui/service/products",
      dataType: "jsonp"
    }
  }
});
$("#autocomplete").kendoAutoComplete({
  dataSource: dataSource,
  dataTextField: "ProductName"
});
</script>

dataTextField String(default: null)

這個字段會用在搜索建議時。

示例：設(shè)置dataTextField

<input id="autocomplete" />
<script>
var data = [
  { id: 1, name: "Apples" },
  { id: 2, name: "Oranges" }
];
$("#autocomplete").kendoAutoComplete({
  dataTextField: "name", // The widget is bound to the "name" field
  dataSource: data
});
</script>

delay Number(default: 200)

當發(fā)生鍵盤1敲擊事件時組件會彈出建議窗口

示例：設(shè)置顯示

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  delay: 500
});
</script>

enable Boolean(default: true)

如果設(shè)置為false，組件會被禁用，用戶將無法輸入。但默認情況下這個組件是true。
示例：禁用組件

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  enable: false
});
</script>

filter String(default: "startswith")

這個篩選方法用于決定當前值的建議，默認值是"startswith";，另外還有endswith 和 contains.

示例：設(shè)置過濾器

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  filter: "contains"
});
</script>

height Number(default: 200)

示例：設(shè)置高度

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  height: 500
});
</script>

highlightFirst Boolean(default: true)

如果設(shè)置為true，第一個建議會自動設(shè)置為高亮。

示例：設(shè)置highlightFirst

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  highlightFirst: false
});
</script>

ignoreCase Boolean(default: true)

默認情況下組件的搜索是區(qū)分大小寫的。

示例：禁用不區(qū)分大小寫的建議

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  ignoreCase: false
});
</script>

minLength Number(default: 1)

用戶在執(zhí)行搜索之前就必須鍵入元素的最小值，如果搜索結(jié)果匹配值太多，可以將值設(shè)置高一點（大于1）。

示例：設(shè)置最小高度

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  minLength: 3
});
</script>

placeholder String(default: "")

當提示為空時會顯示占位符，默認情況下無設(shè)置。

示例：指定占位符

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  placeholder: "Enter value ..."
});
</script>

Kendo UI AutoComplete組件還可以使用HTML屬性作為占位符提示。

示例：使用占位符HTML屬性

<input id="autocomplete" placeholder="Enter value..." />
<script>
$("#autocomplete").kendoAutoComplete();
</script>

separator String(default: "")

示例：設(shè)置多個值之間的分隔符

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  separator: ", "
});
</script>

suggest Boolean(default: false)

如果設(shè)置為true，組件會自動使用第一個建議作為它的值。

示例：啟用自動建議

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  suggest: true
});
</script>

慧都特邀Kendo UI原廠開發(fā)工程師舉行線上公開課，使用該控件的朋友千萬別錯過哦>>