AutoComplete Features Showcase

Comprehensive demonstration of all AutoComplete component features based on README.md documentation.

Quick Start - Basic Usage

Try typing: Lap, Mouse, Chair, Desk

Multi-Field Search

Search across Name, Category, and Description simultaneously

Try typing: ergonomic (finds chair & mouse), RGB (finds keyboard), Electronics (category search)

Works with all filter strategies (StartsWith, Contains, Fuzzy)

7 Built-In Display Modes

Eliminate custom ItemTemplate boilerplate

Try typing in any box: Lap, Key, Mon, Pen

Simple

TitleWithDescription

TitleWithBadge

IconWithTitle

Card Mode (All Fields)

Filter Strategies

StartsWith (Default)

~3ms for 100K items

Contains

~2ms for 100K items

Fuzzy

~72ms for 100K items

Fluent Configuration API

Builder pattern for complex configurations

var config = AutoCompleteConfig<Product>.Create()
    .WithItems(products)
    .WithTextField(p => p.Name)
    .WithTitleAndDescription(p => p.Category)
    .WithBootstrapTheme(BootstrapTheme.Success)
    .Build();

Grouping

Try typing: a or e (see items grouped by category: Electronics, Furniture, Stationery)

Default Headers

Custom Group Template

Virtualization (100K+ Items)

Handle large datasets efficiently - generates 5,000 items

Try typing: Premium, Standard, Budget, Product 100, Item 500

Dataset: 5000 items (60fps scrolling maintained)

Bootstrap Theme Variants

9 pre-configured Bootstrap 5 color schemes

Try typing in each: Lap, Des, Web - notice the different color themes

Primary

Success

Danger

Configuration Options

MinSearchLength (3)

DebounceMs (1000)

MaxDisplayedItems (5)

Custom Templates

Try typing: Lap, Chair (see rich template) or xyz (see "No results" template)

📊 Features Summary

Display Modes: 7 built-in modes
Filter Strategies: StartsWith, Contains, Fuzzy, Custom
Multi-Field Search: Search across multiple properties
Grouping: Default and custom templates

Virtualization: 5000 items demo
Bootstrap Themes: 9 color variants
Fluent API: 100% parameter coverage
AOT Compatible: Zero reflection, fully trimmable