BlazorX
About

AutoComplete - API Reference

Complete API documentation for the AutoComplete component.

Parameters

Parameter Type Default Description
Items IEnumerable<T> null Static collection of items for client-side filtering
SearchFunc Func<string, Task<IEnumerable<T>>> null Function to search items server-side
FilterMode AutoCompleteFilterMode Hybrid Filtering strategy: ClientSide, ServerSide, or Hybrid
HybridThreshold int 1000 Item count threshold for hybrid mode switching
PropertyName string null Property name for display (for complex objects)
ToStringFunc Func<T, string> null Custom function to convert item to display string
AllowCustomValues bool false Allow user to enter values not in the list
CoerceValue Func<string, T> null Function to convert user input to value type
MinSearchLength int 1 Minimum characters before triggering search
MaxItems int 50 Maximum items to display in dropdown
DebounceInterval int 300 Debounce delay in milliseconds
CaseSensitive bool false Enable case-sensitive filtering
Clearable bool false Show clear button when value is set
Disabled bool false Disable the component
ReadOnly bool false Make the component read-only
Placeholder string "" Placeholder text for input
Label string "" Label text displayed above input
HelperText string "" Helper text displayed below input
TabBehavior AutoCompleteTabBehavior MoveFocus Behavior when Tab key pressed

Templates

Template Context Type Description
ItemTemplate T (item) Custom template for each dropdown item
SelectedTemplate T (item) Custom template for displaying selected value
LoadingTemplate - Template shown while searching
NoItemsTemplate - Template shown when no results found
ErrorTemplate AutoCompleteErrorContext Template shown when search error occurs
HeaderTemplate - Template for dropdown header
FooterTemplate - Template for dropdown footer

Events

Event Signature Description
OnValueChanged EventCallback<T> Fired when the selected value changes
OnSearchTextChanged EventCallback<string> Fired when search text changes
OnSearchError EventCallback<Exception> Fired when search function throws an error

Enumerations

AutoCompleteFilterMode

  • ClientSide - Filter all items on the client
  • ServerSide - Fetch filtered items from server
  • Hybrid - Auto-switch based on item count

AutoCompleteTabBehavior

  • SelectHighlighted - Select highlighted item and move focus
  • MoveFocus - Just move focus without selecting

CSS Classes

Class Description
.blazorx-autocomplete Root container element
.blazorx-autocomplete-input Input element
.blazorx-autocomplete-dropdown Dropdown container
.blazorx-autocomplete-item Individual dropdown item
.blazorx-autocomplete-item-highlighted Highlighted item (keyboard navigation)
.blazorx-autocomplete-clear-btn Clear button

Keyboard Shortcuts

Key Action
↓ Arrow Down Move to next item
↑ Arrow Up Move to previous item
Enter Select highlighted item
Esc Close dropdown
Tab Select or move focus (based on TabBehavior)
Home Jump to first item
End Jump to last item

Usage Examples

Basic Usage

<AutoComplete TItem="string"
              @bind-Value="selectedValue"
              Items="@items"
              Placeholder="Search..." />

Server-Side Search

<AutoComplete TItem="Product"
              @bind-Value="selectedProduct"
              SearchFunc="@SearchProductsAsync"
              ToStringFunc="@(p => p.Name)"
              FilterMode="AutoCompleteFilterMode.ServerSide" />

With Custom Template

<AutoComplete TItem="User" @bind-Value="user" Items="@users">
    <ItemTemplate Context="u">
        <div>@u.Name (@u.Email)</div>
    </ItemTemplate>
</AutoComplete>