外观

立即下载Kendo UI for jQuery

注意：从Kendo UI R1 2022开始，jQuery AutoComplete小部件有了新的渲染和样式选项。

本文将向您展示有关 Kendo UI AutoComplete 渲染的信息。

选项

Kendo UI AutoComplete 支持以下样式选项：

size— 配置组件的整体尺寸。
rounded— 配置标签的边框半径。
fillMode— 控制颜色的应用方式。

尺寸

size选项控制自动完成组件的外观大小，类的结构是k-input-{size}.

该size选项可以使用以下值：

sm-小尺寸
md-中等大小
lg-大尺寸
none—未设置

默认大小值为中等，它通过k-input-md类应用于span封装元素。

下面的示例显示了基本配置以及如何设置size为“大”：

下面是受配置影响的 HTML。更改将应用于span.k-autocomplete封装元素：

<span class="k-autocomplete k-input k-input-lg">
...
</span>

圆形

该rounded选项控制对小部件中所选项目的标签应用多少边框半径，类的结构是k-rounded-{size}.

该rounded选项可以使用以下值：

sm——边界半径小
md—中等边界半径
lg——边界半径大
full——椭圆形边界半径
none—未设置

默认值是medium，它应用于span，通过k-round -md类自动完成封装元素。

下面的示例显示了基本的自动完成配置以及如何设置rounded为“full”：

更改将应用于span.k-autocomplete封装元素：

<span class="k-autocomplete k-input k-rounded-full">
...
</span>

填充模式

该fillMode选项控制颜色的应用方式，类的结构是k-input-{fillMode}.

该fillMode选项可以使用以下值：

solid
flat
outline
none

默认值为solid，它应用于span.k-autocomplete通过k-input-solid类完成封装元素。

下面的示例展示了基本的AutoComplement配置以及如何设置fillMode为“outline”：

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

更改将应用于span.k-autocomplete封装元素：

<span class="k-autocomplete k-input k-input-outline">
...
</span>

旧渲染与新渲染

下面您将发现新旧渲染之间的差异。

以下示例展示了包装器渲染。

<!-- OLD WRAPPER-->
<span class="k-widget k-autocomplete">
<input id="autocomplete" type="text" class="k-input" placeholder="...">
</span>

<!-- NEW WRAPPER -->
<span class="k-autocomplete k-input k-input-md k-rounded-md k-input-solid">
<input type="text" class="k-input-inner" value="..." placeholder="..." />
</span>

以下示例展示了没有虚拟化的弹出渲染。

<!-- OLD POPUP WITHOUT VIRTUALIZATION-->
<div class="k-list-container k-popup k-group k-reset k-state-border-up" id="products-list" data-role="popup">
[Header template]
<div class="k-group-header">Argentina</div>
<div class="k-list-scroller">
<ul class="k-list k-reset">
<li class="k-item">Patricio Simpson</li>
...
<li class="k-item k-first">
Ann Devon
<div class="k-group">UK</div>
</li>
</ul>
</div>
<div class="k-nodata">
<div>No Data!</div>
</div>
<div class="k-footer">
[Footer template]
</div>
</div>

<!-- NEW POPUP WITHOUT VIRTUALIZATION -->
<div class="k-popup k-group k-reset">
<div class="k-list k-list-md">
<div class="k-list-header">
[header template]
</div>
<div class="k-list-group-sticky-header">Argentina</div>
<div class="k-list-content k-list-scroller">
<ul class="k-list-ul">
<li class="k-list-item">
<span class="k-list-item-text">Patricio Simpson</span>
</li>
...
<li class="k-list-item k-first">
<span class="k-list-item-text">Roland Mendel</span>
<div class="k-list-item-group-label">Austria</div>
</li>
...
</ul>
</div>
<div class="k-nodata">
<div>No data found.</div>
</div>
<div class="k-list-footer">
[Footer template]
</div>
</div>
</div>

以下示例展示了使用虚拟化的弹出渲染。

Copy code<!-- OLD POPUP WITH VIRTUALIZATION-->
<div class="k-list-container k-popup k-group k-reset">
<div>
[Header template]
</div>
<div class="k-virtual-wrap">
<div class="k-group-header"></div>
<div class="k-virtual-content">
<ul class="k-list k-reset k-virtual-list">
<li class="k-virtual-item k-item">
Vins et alcools Chevalier
</li>
...
<li class="k-virtual-item k-item">
Toms Spezialit?ten
</li>
...
</ul>
<div class="k-height-container">
<div style="height: ....;"></div>
</div>
</div>
</div>
<div class="k-nodata">
<div>No data found.</div>
</div>
<div class="k-footer">
[Footer template]
</div>
</div>

<!-- NEW POPUP WITH VIRTUALIZATION-->
<div class="k-popup k-group k-reset">
<div class="k-list k-list-md k-virtual-list">
<div class="k-list-header">
[Header template]
</div>
<div class="k-list-group-sticky-header">Argentina</div>
<div class="k-list-content k-virtual-content">
<ul class="k-list-ul">
<li class="k-list-item">
<span class="k-list-item-text">
Text
</span>
</li>
...
<li class="k-list-item k-first">
<span class="k-list-item-text">
Ernst Handel, Austria
</span>
<div class="k-list-item-group-label">Austria</div>
</li>
...
</ul>
<div class="k-height-container">
<div style="height: ...;"></div>
</div>
</div>
<div class="k-nodata">
<div>No data found.</div>
</div>
<div class="k-list-footer">
[Footer template]
</div>
</div>
</div>

视觉向后兼容性

要获得与旧渲染相同的样式，您必须更新元素引用。

注意：当您使用 LESS 主题时，新的样式和渲染仅支持默认选项。

旧渲染可以通过该类获取对 AutoComplete 输入元素的引用k-input。

$(".k-input") // Returns a reference to the input element in the old rendering.

对于新渲染，您必须使用该类来定位 AutoComplete 输入元素k-input-inner。

$(".k-input-inner") // Returns a reference to the input element in the new rendering.

下面的例子展示了如何在新的和旧的渲染中自定义AutoComplement的样式：

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 1, name: "Tomatoes" },
{ id: 1, name: "Strawberry" },
{ id: 1, name: "Cherry" },
{ id: 1, name: "Melon" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
value: "Oranges"
});
</script>
<style>
/* NEW RENDERING */
/* The style below will works with versions R1 2022 and later*/

#autocomplete.k-input-inner{ /* customize the style input */
background: lightgreen;
}

#autocomplete-list .k-list-item{ /* customize the styles of the items in the popup */
background-color: #FFDFDD;
}

/* OLD RENDERING */
/* The style below will works with versions prior to R1 2022 */

#autocomplete-list .k-item{ /* customize the styles of the items in the popup */
background-color: #FFE5B4 !important;
}
</style>

对于新的渲染，应该使用不同的类来自定义自动完成模板。

AutoComplete 还提供了用于设置其列表和弹出窗口的宽度、访问其list元素以及删除其输入值的选项。

设置列表宽度

要自定义自动完成列表的宽度并更改其尺寸，请使用 jQuerywidth()方法。

<input id="autoComplete" />

<script>
$("#autoComplete").kendoAutoComplete();
var autoComplete = $("#autocomplete").data("kendoAutoComplete");
// Set the width of the drop-down list.
autoComplete.list.width(400);
</script>

设置弹出宽度

您可以使popup元素根据其显示的项目标签的长度自动调整其宽度,当该autoWidth选项设置为true时，弹出窗口将在单行上显示内容，并且不会将其换行。

<input id="autocomplete" style="width: 100px;" />
<script>
$("#autocomplete").kendoAutoComplete({
autoWidth: true,
dataSource: {
data: ["Short item", "An item with really, really long text"]
}
});
</script>

访问列表元素

自动完成列表呈现一个ID由小部件的 ID 和后缀生成的属性-list,您可以使用ID来设置元素的样式或访问弹出元素内的特定元素。

注意：如果AutoComplete没有ID，那么列表元素也将没有ID。

<input id="autocomplete">
<script>
$(document).ready(function() {
$("#autocomplete").kendoAutoComplete({
dataSource: ["Item1", "Item2"]
});

// The DIV popup element that holds the header and footer templates, and the suggestion options.
var popupElement = $("#autocomplete-list");

console.log(popupElement);
});
</script>

删除输入值

自动完成功能使您能够使用配置选项从其输入区域中删除值clearButton。因此，悬停时输入区域中会出现一个x按钮，单击该按钮时，它会重置小部件的值并触发事件change。默认情况下，clearButton已启用并设置为true。

彩票走势图

外观

选项

尺寸

圆形