TheTelerik UI for ASP.NET Core AutoComplete introduces the Prefix and Suffix features that allow you to add custom content like icons, HTML elements, images, and more, before or after the input field.

Theprefix input adornment is an element placed before the user input field, and it is commonly used to clarify the expected data in the input, such as currency symbols or unit indicators. The Prefix functionality is set up through thePrefixOptions() configuration, and it supports the following options:

• Icon()—Inserts an icon before the AutoComplete element. Accepts the name for an existing icon in the Kendo UI theme or SVG content.
• Template()—Adds custom content before the AutoComplete element. You can use a variety of templating options likeTemplateId(),TemplateHandler(), and more.
• Separator(false)—Removes the separator of the prefix adornment. By default, the separator is visible.

Thesuffix input adornment is an element positioned after the user input field. Usually, it provides direct functionality for the entered data, like password visibility toggles, formatting, or clearing the input. The Suffix functionality is set up through theSuffixOptions() configuration, and it supports the same options as the Prefix feature:

• Icon()—Inserts an icon after the AutoComplete element.
• Template()—Adds custom content for the suffix adornment of the AutoComplete.
• Separator(false)—Removes the separator of the suffix adornment. By default, the separator is visible.

This demo shows how to add aSearch icon before the AutoComplete and append aButton component after the AutoComplete element.