外觀
注意：從Kendo UI R1 2022開(kāi)始，jQuery AutoComplete小部件有了新的渲染和樣式選項(xiàng)。
本文將向您展示有關(guān) Kendo UI AutoComplete 渲染的信息。
選項(xiàng)
Kendo UI AutoComplete 支持以下樣式選項(xiàng)：
- size— 配置組件的整體尺寸。
- rounded— 配置標(biāo)簽的邊框半徑。
- fillMode— 控制顏色的應(yīng)用方式。
尺寸
size選項(xiàng)控制自動(dòng)完成組件的外觀大小，類的結(jié)構(gòu)是k-input-{size}.
該size選項(xiàng)可以使用以下值：
- sm-小尺寸
- md-中等大小
- lg-大尺寸
- none—未設(shè)置
默認(rèn)大小值為中等，它通過(guò)k-input-md類應(yīng)用于span封裝元素。
下面的示例顯示了基本配置以及如何設(shè)置size為“大”：
下面是受配置影響的 HTML。更改將應(yīng)用于span.k-autocomplete封裝元素：
<span class="k-autocomplete k-input k-input-lg"> ... </span>
圓形
該rounded選項(xiàng)控制對(duì)小部件中所選項(xiàng)目的標(biāo)簽應(yīng)用多少邊框半徑，類的結(jié)構(gòu)是k-rounded-{size}.
該rounded選項(xiàng)可以使用以下值：
- sm——邊界半徑小
- md—中等邊界半徑
- lg——邊界半徑大
- full——橢圓形邊界半徑
- none—未設(shè)置
默認(rèn)值是medium，它應(yīng)用于span，通過(guò)k-round -md類自動(dòng)完成封裝元素。
下面的示例顯示了基本的自動(dòng)完成配置以及如何設(shè)置rounded為“full”：
更改將應(yīng)用于span.k-autocomplete封裝元素：
<span class="k-autocomplete k-input k-rounded-full"> ... </span>
填充模式
該fillMode選項(xiàng)控制顏色的應(yīng)用方式，類的結(jié)構(gòu)是k-input-{fillMode}.
該fillMode選項(xiàng)可以使用以下值：
- solid
- flat
- outline
- none
默認(rèn)值為solid，它應(yīng)用于span.k-autocomplete通過(guò)k-input-solid類完成封裝元素。
下面的示例展示了基本的AutoComplement配置以及如何設(shè)置fillMode為“outline”：
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
fillMode: "outline"
});
</script>
更改將應(yīng)用于span.k-autocomplete封裝元素：
<span class="k-autocomplete k-input k-input-outline"> ... </span>
舊渲染與新渲染
下面您將發(fā)現(xiàn)新舊渲染之間的差異。
以下示例展示了包裝器渲染。
<!-- 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>
以下示例展示了沒(méi)有虛擬化的彈出渲染。
<!-- 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>
視覺(jué)向后兼容性
要獲得與舊渲染相同的樣式，您必須更新元素引用。
注意：當(dāng)您使用 LESS 主題時(shí)，新的樣式和渲染僅支持默認(rèn)選項(xiàng)。
舊渲染可以通過(guò)該類獲取對(duì) AutoComplete 輸入元素的引用k-input。
$(".k-input") // Returns a reference to the input element in the old rendering.
對(duì)于新渲染，您必須使用該類來(lái)定位 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>
對(duì)于新的渲染，應(yīng)該使用不同的類來(lái)自定義自動(dòng)完成模板。
設(shè)置列表寬度
要自定義自動(dòng)完成列表的寬度并更改其尺寸，請(qǐng)使用 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>
設(shè)置彈出寬度
您可以使popup元素根據(jù)其顯示的項(xiàng)目標(biāo)簽的長(zhǎng)度自動(dòng)調(diào)整其寬度,當(dāng)該autoWidth選項(xiàng)設(shè)置為true時(shí)，彈出窗口將在單行上顯示內(nèi)容，并且不會(huì)將其換行。
<input id="autocomplete" style="width: 100px;" />
<script>
$("#autocomplete").kendoAutoComplete({
autoWidth: true,
dataSource: {
data: ["Short item", "An item with really, really long text"]
}
});
</script>
訪問(wèn)列表元素
自動(dòng)完成列表呈現(xiàn)一個(gè)ID由小部件的 ID 和后綴生成的屬性-list,您可以使用ID來(lái)設(shè)置元素的樣式或訪問(wèn)彈出元素內(nèi)的特定元素。
注意：如果AutoComplete沒(méi)有ID，那么列表元素也將沒(méi)有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>
刪除輸入值
自動(dòng)完成功能使您能夠使用配置選項(xiàng)從其輸入?yún)^(qū)域中刪除值clearButton。因此，懸停時(shí)輸入?yún)^(qū)域中會(huì)出現(xiàn)一個(gè)x按鈕，單擊該按鈕時(shí)，它會(huì)重置小部件的值并觸發(fā)事件change。默認(rèn)情況下，clearButton已啟用并設(shè)置為true。
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線