外觀
注意：從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>
對于新的渲染，應該使用不同的類來自定義自動完成模板。
設置列表寬度
要自定義自動完成列表的寬度并更改其尺寸，請使用 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。
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線