<kendo:autoComplete>

A JSP wrapper for Kendo UI AutoComplete.

Configuration Attributes

animation `boolean`

Configures the opening and closing animations of the suggestion popup. Setting the animation option to false will disable the opening and closing animations. As a result the suggestion popup will open and close instantly. is not a valid configuration. Further configuration is available via kendo:autoComplete-animation.

Example

<kendo:autoComplete animation="animation">
</kendo:autoComplete>

autoWidth `boolean`

If set to true, the widget automatically adjusts the width of the popup element and does not wrap up the item label.

Example

<kendo:autoComplete autoWidth="autoWidth">
</kendo:autoComplete>

clearButton `boolean`

Unless this options is set to false, a button will appear when hovering the widget. Clicking that button will reset the widget's value and will trigger the change event.

Example

<kendo:autoComplete clearButton="clearButton">
</kendo:autoComplete>

dataTextField `java.lang.String`

The field of the data item used when searching for suggestions. This is the text that will be displayed in the list of matched results.

Example

<kendo:autoComplete dataTextField="dataTextField">
</kendo:autoComplete>

delay `float`

The delay in milliseconds between a keystroke and when the widget displays the suggestion popup.

Example

<kendo:autoComplete delay="delay">
</kendo:autoComplete>

enable `boolean`

If set to false the widget will be disabled and will not allow user input. The widget is enabled by default and allows user input.

Example

<kendo:autoComplete enable="enable">
</kendo:autoComplete>

enforceMinLength `boolean`

If set to true the widget will not show all items when the text of the search input cleared. By default the widget shows all items when the text of the search input is cleared. Works in conjunction with minLength.

Example

<kendo:autoComplete enforceMinLength="enforceMinLength">
</kendo:autoComplete>

fillMode `java.lang.String`

Sets a value controlling how the color is applied. Can also be set to the following string values: "none"; "solid"; "flat" or "outline".

Example

<kendo:autoComplete fillMode="fillMode">
</kendo:autoComplete>

filter `java.lang.String`

The filtering method used to determine the suggestions for the current value. The default filter is "startswith" - all data items which begin with the current widget value are displayed in the suggestion popup. The supported filter values are startswith, endswith and contains.

Example

<kendo:autoComplete filter="filter">
</kendo:autoComplete>

fixedGroupTemplate `java.lang.String`

The template used to render the fixed header group. By default the widget displays only the value of the current group.

Example

<kendo:autoComplete fixedGroupTemplate="fixedGroupTemplate">
</kendo:autoComplete>

footerTemplate `java.lang.String`

The template used to render the footer template. The footer template receives the widget itself as a part of the data argument. Use the widget fields directly in the template.

Example

<kendo:autoComplete footerTemplate="footerTemplate">
</kendo:autoComplete>

groupTemplate `java.lang.String`

The template used to render the groups. By default the widget displays only the value of the group.

Example

<kendo:autoComplete groupTemplate="groupTemplate">
</kendo:autoComplete>

headerTemplate `java.lang.String`

Specifies a static HTML content, which will be rendered as a header of the popup element.

Example

<kendo:autoComplete headerTemplate="headerTemplate">
</kendo:autoComplete>

height `float`

The height of the suggestion popup in pixels. The default value is 200 pixels.

Example

<kendo:autoComplete height="height">
</kendo:autoComplete>

highlightFirst `boolean`

If set to true the first suggestion will be automatically highlighted.

Example

<kendo:autoComplete highlightFirst="highlightFirst">
</kendo:autoComplete>

ignoreCase `boolean`

If set to false case-sensitive search will be performed to find suggestions. The widget performs case-insensitive searching by default.

Example

<kendo:autoComplete ignoreCase="ignoreCase">
</kendo:autoComplete>

minLength `float`

The minimum number of characters the user must type before a search is performed. Set to higher value than 1 if the search could match a lot of items.

Example

<kendo:autoComplete minLength="minLength">
</kendo:autoComplete>

noDataTemplate `java.lang.String`

The template used to render the "no data" template, which will be displayed if no results are found or the underlying data source is empty. The noData template receives the widget itself as a part of the data argument. The template will be evaluated on every widget data bound.

Example

<kendo:autoComplete noDataTemplate="noDataTemplate">
</kendo:autoComplete>

placeholder `java.lang.String`

The hint displayed by the widget when it is empty. Not set by default.

Example

<kendo:autoComplete placeholder="placeholder">
</kendo:autoComplete>

popup `java.lang.Object`

The options that will be used for the popup initialization. For more details about the available options refer to Popup documentation.

Example

<kendo:autoComplete popup="popup">
</kendo:autoComplete>

rounded `java.lang.String`

Sets a value controlling the border radius. Can also be set to the following string values: "none"; "small"; "medium"; "large" or "full".

Example

<kendo:autoComplete rounded="rounded">
</kendo:autoComplete>

separator `java.lang.Object`

The character used to separate multiple values. Empty by default.

Example

<kendo:autoComplete separator="separator">
</kendo:autoComplete>

size `java.lang.String`

Sets a value controlling size of the component. Can also be set to the following string values: "small"; "medium"; "large" or "none".

Example

<kendo:autoComplete size="size">
</kendo:autoComplete>

suggest `boolean`

If set to true the widget will automatically use the first suggestion as its value.

Example

<kendo:autoComplete suggest="suggest">
</kendo:autoComplete>

template `java.lang.String`

The template used to render the suggestions. By default the widget displays only the text of the suggestion (configured via dataTextField).

Example

<kendo:autoComplete template="template">
</kendo:autoComplete>

value `java.lang.String`

The value of the widget.

Example

<kendo:autoComplete value="value">
</kendo:autoComplete>

valuePrimitive `boolean`

Specifies the value binding behavior for the widget when the initial model value is null. If set to true, the View-Model field will be updated with the selected item text field. If set to false, the View-Model field will be updated with the selected item.

Example

<kendo:autoComplete valuePrimitive="valuePrimitive">
</kendo:autoComplete>

virtual `boolean`

Enables the virtualization feature of the widget. The configuration can be set on an object, which contains two properties - itemHeight and valueMapper.For detailed information, refer to the article on virtualization. Further configuration is available via kendo:autoComplete-virtual.

Example

<kendo:autoComplete virtual="virtual">
</kendo:autoComplete>

Configuration JSP Tags

kendo:autoComplete-animation

More documentation is available at kendo:autoComplete-animation.

Example

<kendo:autoComplete>
    <kendo:autoComplete-animation></kendo:autoComplete-animation>
</kendo:autoComplete>

kendo:autoComplete-messages

The text messages displayed in the widget. Use this option to customize or localize the messages.

More documentation is available at kendo:autoComplete-messages.

Example

<kendo:autoComplete>
    <kendo:autoComplete-messages></kendo:autoComplete-messages>
</kendo:autoComplete>

kendo:autoComplete-virtual

More documentation is available at kendo:autoComplete-virtual.

Example

<kendo:autoComplete>
    <kendo:autoComplete-virtual></kendo:autoComplete-virtual>
</kendo:autoComplete>

Event Attributes

change `String`

Fired when the value of the widget is changed by the user.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the change event documentation.

Example

<kendo:autoComplete change="handle_change">
</kendo:autoComplete>
<script>
    function handle_change(e) {
        // Code to handle the change event.
    }
</script>

close `String`

Fired when the suggestion popup of the widget is closed by the user.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the close event documentation.

Example

<kendo:autoComplete close="handle_close">
</kendo:autoComplete>
<script>
    function handle_close(e) {
        // Code to handle the close event.
    }
</script>

dataBound `String`

Fired when the widget is bound to data from its data source.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the dataBound event documentation.

Example

<kendo:autoComplete dataBound="handle_dataBound">
</kendo:autoComplete>
<script>
    function handle_dataBound(e) {
        // Code to handle the dataBound event.
    }
</script>

filtering `String`

Fired when the widget is about to filter the data source.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the filtering event documentation.

Example

<kendo:autoComplete filtering="handle_filtering">
</kendo:autoComplete>
<script>
    function handle_filtering(e) {
        // Code to handle the filtering event.
    }
</script>

open `String`

Fired when the suggestion popup of the widget is opened by the user.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the open event documentation.

Example

<kendo:autoComplete open="handle_open">
</kendo:autoComplete>
<script>
    function handle_open(e) {
        // Code to handle the open event.
    }
</script>

select `String`

Fired when an item from the suggestion popup is selected by the user.

For additional information check the select event documentation.

Example

<kendo:autoComplete select="handle_select">
</kendo:autoComplete>
<script>
    function handle_select(e) {
        // Code to handle the select event.
    }
</script>

Event Tags

kendo:autoComplete-change

Fired when the value of the widget is changed by the user.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the change event documentation.

Example

<kendo:autoComplete>
    <kendo:autoComplete-change>
        <script>
            function(e) {
                // Code to handle the change event.
            }
        </script>
    </kendo:autoComplete-change>
</kendo:autoComplete>

kendo:autoComplete-close

Fired when the suggestion popup of the widget is closed by the user.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the close event documentation.

Example

<kendo:autoComplete>
    <kendo:autoComplete-close>
        <script>
            function(e) {
                // Code to handle the close event.
            }
        </script>
    </kendo:autoComplete-close>
</kendo:autoComplete>

kendo:autoComplete-dataBound

Fired when the widget is bound to data from its data source.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the dataBound event documentation.

Example

<kendo:autoComplete>
    <kendo:autoComplete-dataBound>
        <script>
            function(e) {
                // Code to handle the dataBound event.
            }
        </script>
    </kendo:autoComplete-dataBound>
</kendo:autoComplete>

kendo:autoComplete-filtering

Fired when the widget is about to filter the data source.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the filtering event documentation.

Example

<kendo:autoComplete>
    <kendo:autoComplete-filtering>
        <script>
            function(e) {
                // Code to handle the filtering event.
            }
        </script>
    </kendo:autoComplete-filtering>
</kendo:autoComplete>

kendo:autoComplete-open

Fired when the suggestion popup of the widget is opened by the user.The event handler function context (available via the this keyword) will be set to the widget instance.

For additional information check the open event documentation.

Example

<kendo:autoComplete>
    <kendo:autoComplete-open>
        <script>
            function(e) {
                // Code to handle the open event.
            }
        </script>
    </kendo:autoComplete-open>
</kendo:autoComplete>

kendo:autoComplete-select

Fired when an item from the suggestion popup is selected by the user.

For additional information check the select event documentation.

Example

<kendo:autoComplete>
    <kendo:autoComplete-select>
        <script>
            function(e) {
                // Code to handle the select event.
            }
        </script>
    </kendo:autoComplete-select>
</kendo:autoComplete>

animation boolean

Example

autoWidth boolean

Example

clearButton boolean

Example

dataTextField java.lang.String

Example

delay float

Example

enable boolean

Example

enforceMinLength boolean

Example

fillMode java.lang.String

Example

filter java.lang.String

Example

fixedGroupTemplate java.lang.String

Example

footerTemplate java.lang.String

Example

groupTemplate java.lang.String

Example

headerTemplate java.lang.String

Example

height float

Example

highlightFirst boolean

Example

ignoreCase boolean

Example

minLength float

Example

noDataTemplate java.lang.String

Example

placeholder java.lang.String

Example

popup java.lang.Object

Example

rounded java.lang.String

Example

separator java.lang.Object

Example

size java.lang.String

Example

suggest boolean

Example

template java.lang.String

Example

value java.lang.String

Example

valuePrimitive boolean

Example

virtual boolean

Example

Example

Example

Example

change String

Example

close String

Example

dataBound String

Example

filtering String

Example

open String

Example

select String

Example

Example

Example

Example

Example

Example

Example

Getting Started

Community

Frameworks

animation `boolean`

autoWidth `boolean`

clearButton `boolean`

dataTextField `java.lang.String`

delay `float`

enable `boolean`

enforceMinLength `boolean`

fillMode `java.lang.String`

filter `java.lang.String`

fixedGroupTemplate `java.lang.String`

footerTemplate `java.lang.String`

groupTemplate `java.lang.String`

headerTemplate `java.lang.String`

height `float`

highlightFirst `boolean`

ignoreCase `boolean`

minLength `float`

noDataTemplate `java.lang.String`

placeholder `java.lang.String`

popup `java.lang.Object`

rounded `java.lang.String`

separator `java.lang.Object`

size `java.lang.String`

suggest `boolean`

template `java.lang.String`

value `java.lang.String`

valuePrimitive `boolean`

virtual `boolean`

change `String`

close `String`

dataBound `String`

filtering `String`

open `String`

select `String`