Telerik UI for Windows 8 HTML

This article will show and explain the HTML output and CSS classes of RadAutoCompleteBox in basic scenarios (some HTML attributes have been removed for simplicity).

Basic Output

Below you can see the basic HTML output of the RadAutoCompleteBox and descriptions of its elements.

HTML Copy imageCopy
<span class="t-list win-interactive">
    <span class="k-widget k-autocomplete k-header k-state-default">
        <input class="k-input" placeholder="Default Placeholder">
        <span class="k-icon k-loading" style="display: none;"></span>
    </span>
</span>

Class/selector name

Description

.t-list

The RadAutoCompleteBox wrapper element. This is the element that is passed in the control's constructor.

.k-autocomplete

The wrapper of the autocomplete widget. For different widget states - see the next section.

.k-autocomplete .k-input

The text element of the widget.

Note

One additional CSS class is added to the .k-input. When the user starts typing text and the placeholder is removed, the .t-typed-text class is added.

.k-autocomplete .k-loading

Loading indicator of the widget.

Additional states of the control

These CSS classes are added to the .k-autocomplete widget in different scenarios (when the widget is focused, hovered, disabled, etc.).

Class/selector name

Description

.k-autocomplete.k-state-hover

This class is added to the widget when the mouse is over the autocomplete widget.

.k-autocomplete.k-state-focused

This class is added to the widget when it is focused.

.k-autocomplete.k-state-disabled

This class is added to the widget when the widget is disabled. That is when the enabled property is set to false.

.k-autocomplete.k-state-border-down

This class is added to the widget when the popup is opened below the input box.

.k-autocomplete.k-state-border-up

This class is added to the widget when the popup is opened above the input box.

List Container Output

Below you can see the basic HTML output of the dropdown list container of the RadAutoCompleteBox and descriptions of its elements.

HTML Copy imageCopy
<div class="k-animation-container">
    <div class="k-list-container k-popup k-group k-reset">
        <ul class="k-list k-reset">
            <li class="k-item">Suggestion 1</li>
            <li class="k-item">Suggestion 2</li>
        </ul>
    </div>
</div>

Class/selector name

Description

.k-animation-container

The element that wraps the list popup when it is animated.

.k-list-container.k-popup

The wrapper element of the popup.

Note

Two additional CSS classes are added to the .k-popup.

  • .k-state-border-down - This class is added to the widget when the popup is opened below the input box.

  • .k-state-border-up - This class is added to the widget when the popup is opened above the input box.

.k-popup .k-list

The list container with the results.

.k-popup .k-list .k-item

A single item from the results.

Additional States of the items

These CSS classes are added to the .k-item element in different scenarios (when the widget is focused or hovered).

Class/selector name

Description

.k-popup .k-state-hover.k-item

This class is added to the list item when the mouse hovers over it.

.k-popup .k-state-focused.k-item

This class is added to the list item when it is focused.