# Custom Rendering

The AutoComplete provides options for customizing the way it renders its elements.

The AutoComplete utilizes custom renderers which enable you to moderate the content of its:

* [Suggestion list items](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/autocomplete/custom-rendering#items)
* [Header and footer elements](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/autocomplete/custom-rendering#headers-and-footers)
* [Suggestion list when no data is available](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/autocomplete/custom-rendering#no-data)

## Items

To customize the content of each suggestion list item, use the [`itemRender`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/autocompleteprops#itemrender) prop.

The following example demonstrates how to set the `itemRender` prop of the AutoComplete and customize the list elements.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dropdowns/autocomplete/item-render/source.txt)

## Headers and Footers

To set a `header` or a `footer` element in the items popup of the AutoComplete, use the [`header`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/autocompleteprops#header) and [`footer`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/autocompleteprops#footer) props.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dropdowns/autocomplete/header-footer/source.txt)

## No Data

To customize the content of the suggestion list when no data is present, use the [`listNoDataRender`](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/autocompleteprops#listnodatarender) prop.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dropdowns/autocomplete/nodata-render/source.txt)

## Suggested Links

* [API Reference of the AutoComplete](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/api/autocompleteprops)