ui-for-blazor-lp-pages-herobanner

Progress Telerik UI for Blazor

AutoComplete

  • AutoComplete Overview

    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. 

    Telerik.Sitefinity.Libraries.Model.Image..AlternativeText
  • 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.Sitefinity.Libraries.Model.Image..AlternativeText
  • 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 templating options it offers: 


    • 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 


    Telerik.Sitefinity.Libraries.Model.Image..AlternativeText
  • 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) 

    Telerik.Sitefinity.Libraries.Model.Image..AlternativeText
  • 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.

    Telerik.Sitefinity.Libraries.Model.Image..AlternativeText
  • 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. 


    Telerik.Sitefinity.Libraries.Model.Image..AlternativeText
  • 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) and Bootstrap (which looks like the Bootstrap styling to integrate better).  


    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.Sitefinity.Libraries.Model.Image..AlternativeText

Next Steps

Launch demos See Blazor in action and check out how much it can do out-of-the-box.
Download preview Try Blazor with dedicated technical support.