background

UI for Blazor

Blazor AutoComplete

  • The Blazor AutoComplete control lets you replace or augment the browser autocomplete features of a textbox.
  • Part of the Telerik UI for Blazor library along with 110+ professionally-designed UI components.
  • Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
  • Replace or Augment the Browser Features of a Textbox with Blazor AutoComplete

    The Blazor AutoComplete component is a textbox that offers to users list of hints to select from as they type. Users can write their own value or select a suggestion from the dropdown and populate the input. 


    The AutoComplete is a powerful, full-featured UI component that can be bound to data and offers multiple built-in features such as filtering, localization and keyboard navigation. The AutoComplete appearance can be customized by using templates or dimensions and works in both WebAssembly (WASM) and Server-side Blazor apps. 

    Check out the Blazor AutoComplete demo

    Telerik UI for Blazor AutoComplete Overview
  • Blazor AutoComplete Data Binding

    The AutoComplete component supports binding to primitive types (such as simple collection of int, string or other data types) or data models in Blazor applications. 


    Telerik UI for Blazor Form Data Binding
  • Blazor AutoComplete Filtering and Searching

    The Blazor AutoComplete component enables you to speed-up and simplify users search of values via its Filterable parameter. This way the control will filter the available suggestions according to the current user input. 


    The AutoComplete offers additional parameters to fine-tune filtering and searching:  


    • MinLength – allows you to control when the filter list will appear

    • FilterOperator – lets you define filtering operator such as “startswith”, “contains”, “endswith” etc.

  • Customizing AutoComplete with Templates

    The AutoComplete control and its items rendering can be easily customized using one of the built-in templating options:

    • Header Template – enables you to define custom content in the header of the list when it is expanded
    • Item Template – lets you customize the appearance of individual list items
    • Footer Template – enables you to define custom content in the bottom of the list when it is expanded
    • No Data Template – allows you to customize the dropdown message when there are no items to be displayed

    Customizing AutoComplete appearance example

    Telerik UI for Blazor AutoComplete Templates
  • AutoComplete Custom Filtering

    AutoComplete is a flexible component that also allows custom operations. You can implement custom (server) filtering and set a data source dynamically through the OnRead event. 

    Blazor AutoComplete filtering example. 

  • Blazor AutoComplete Events

    You have several events available for capturing and handling changes to the values in the AutoComplete component:  


    • OnRead – fires upon component initialization and user filtering 

    • ValueChanged - fires upon user selection change  

    • OnChange - fires only when the user presses Enter, or blurs the input (for example, clicks outside of the component) 

    • OnBlur - an event which is triggered when it loses focus

    Telerik UI for Blazor Rich Text Editor Events
  • AutoComplete Grouping

    The built-in grouping functionality in the AutoComplete component is enabled through the GroupField parameter. It lets users navigate easily through the options in the list and choose best what they want from each category.  

    Check out the Blazor AutoComplete Grouping functionality

    Telerik UI for Blazor AutoComplete - Grouping
  • Prefix and Suffix Adornments

    Elevate user interactivity leveraging the option for adding prefix and suffix adornments. These are custom items, usually an icon or button, inside the field before or after the input area. Typical prefix adornments are currency symbols or unit indicators, while suffix adornments are often used for password visibility toggles, formatting or clearing the input.

    See Telerik UI for Blazor AutoComplete adornments demo

    Autocomplete-adornments
  • Blazor AutoComplete TabIndex

    The Blazor AutoComplete component, just like all other Telerik UI for Blazor input components, supports keyboard navigation to switch between components thanks to the HTML TabIndex property. Pressing Tab will normally focus the next available input component, the same way your users are accustomed to when standard HTML inputs are used. Having the TabIndex setting lets you customize that order.
  • AutoComplete Popup Settings

    With the Blazor Autocomplete component, you can quickly customize popups from a single dedicated tag. The popup settings allow you to configure minimum and maximum dimensions along with the already existing width, height and class parameters.

    The Open and Close methods allow you to toggle the popup visibility of the UI for Blazor Autocomplete component without triggering the OnOpen/OnClose events.

  • AutoComplete Adaptive Rendering

    Enable a mobile-friendly rendering of the AutoComplete suggestion list popup by simply setting the AdaptiveMode parameter to AdaptiveMode.Auto. In this mode, the component automatically adapts to the current screen size and changes its rendering accordingly. In auto adaptive mode, the AutoComplete component also allows you to define the title text rendered in the header of the popup.

    Check out the Blazor AutoComplete adaptive rendering demo

    Telerik UI for Blazor AutoComplete Component Adaptive Rendering
  • AutoComplete Keyboard Navigation and Accessibility

    Like all other Telerik UI for Blazor components, the AutoComplete component supports out-of-the-box Keyboard Navigation and web accessibility standards implementation standards (including WCAG, Section 508 and WAI-ARIA attributes for screen readers). This enables easy navigation and selection of values in AutoComplete using just a keyboard, as well as access to component content through assistive technologies.

    Explore the full list of supported keys in the Blazor AutoComplete keyboard navigation demo

    Telerik UI fro ASP.NET Core Accessibility
  • AutoComplete Globalization and Localization

    The AutoComplete control has built-in localization support, which makes it easy to translate texts to any language that your Blazor app may require. 


    Blazor Editor Globalization and Localization
  • Customize AutoComplete with Themes

    The Telerik Blazor AutoComplete component has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines), Bootstrap (which looks like the Bootstrap styling to integrate better) and Fluent (based on Microsoft Fluent UI).  


    You can easily customize any of out-of-the-box themes with a few lines of CSS, or create new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application

    Telerik UI for Blazor AutoComplete-Themes
  • Build-in Boundary Detection

    Blazor AutoComplete enables you to set its boundary detection functionality by using the collision binding property. The property specifies the behavior of the component when it does not fit in the viewport. By default, the component fits horizontally and flips vertically.

    Blazor Built-in Boundary Detection
  • Right-to-Left (RTL) Support

    The Telerik UI for Blazor AutoComplete component supports right-to-left configuration. The RTL functionality is supported by most of our components to accommodate users who communicate in a right-to-left language script, such as Arabic and Hebrew.

    Learn more in our Blazor Right-to-Left Support documentation 

    Blazor RTL Support

All Blazor Components

Next Steps