syncfusion-blazor-dropdowns

What this skill does

# Implementing Syncfusion Blazor Dropdowns

## AutoComplete

The AutoComplete component provides intelligent search suggestions as users type, supporting local and remote data sources with advanced filtering, customization, and accessibility features.

### Component Overview

The **SfAutoComplete** component enables:
- **Data Binding:** Local primitives, objects, or remote data sources
- **Filtering:** Real-time search with debounce, filter types (StartsWith, Contains, EndsWith)
- **Organization:** Grouping, sorting, multicolumn display
- **Customization:** Item/group/header/footer templates, styling, placeholders
- **Performance:** Virtualization for large datasets
- **Accessibility:** WCAG compliance, keyboard navigation, ARIA support
- **Interactions:** Events, disabled items, custom values, RTL support

### Documentation Navigation Guide

Choose the reference that matches your current task:

#### Getting Started
📄 **Read:** [references/getting-started.md](references/autocomplete-getting-started.md)
- Installation of NuGet packages
- Project setup (Visual Studio, VS Code, .NET CLI)
- Basic autocomplete implementation
- CSS imports and theme setup
- Initial configuration

#### Data Binding & Sources
📄 **Read:** [references/data-binding.md](references/autocomplete-data-binding.md)
- Binding local data (primitives, objects, ObservableCollection)
- Complex data types (ExpandoObject, DynamicObject)
- Remote data with DataManager
- ODataAdaptor, Web API, and custom adaptors
- DataBound event handling

#### Filtering & Search
📄 **Read:** [references/filtering-and-search.md](references/autocomplete-filtering-and-search.md)
- Enabling and configuring filtering
- Filter types (StartsWith, Contains, EndsWith)
- Local vs. remote data filtering
- DebounceDelay for performance
- Minimum character length
- Highlight search results

#### Data Organization
📄 **Read:** [references/data-organization.md](references/autocomplete-data-organization.md)
- Grouping data by categories
- Sorting list items
- Multicolumn display
- Selection and selection modes
- Value binding and custom values

#### Templates & Styling
📄 **Read:** [references/templates-and-styling.md](references/autocomplete-templates-and-styling.md)
- Item templates (custom list item layout)
- Group templates (group header customization)
- Header, footer, and no-records templates
- CSS class styling
- Placeholder and FloatLabel customization

#### Advanced Features
📄 **Read:** [references/advanced-features.md](references/autocomplete-advanced-features.md)
- Virtualization for large datasets
- Popup settings and positioning
- Disabled items handling
- Custom values support
- Localization and RTL support
- Event handling (ActionBegin, ActionComplete, ValueChange, etc.)

#### Accessibility & Best Practices
📄 **Read:** [references/accessibility-and-best-practices.md](references/autocomplete-accessibility-and-best-practices.md)
- WCAG compliance and accessibility standards
- ARIA attributes
- Keyboard navigation support
- Screen reader compatibility
- Performance optimization tips
- Common issues and troubleshooting

### Quick Start Example

A minimal AutoComplete implementation with local data:

```blazor
@using Syncfusion.Blazor.DropDowns

<SfAutoComplete TValue="string" TItem="Country" DataSource="@Countries">
    <AutoCompleteFieldSettings Value="CountryName"></AutoCompleteFieldSettings>
</SfAutoComplete>

@code {
    public class Country
    {
        public string CountryName { get; set; }
    }

    private List<Country> Countries = new()
    {
        new Country { CountryName = "Austria" },
        new Country { CountryName = "Brazil" },
        new Country { CountryName = "Canada" }
    };
}
```

### Common Patterns

#### Pattern 1: Filtering User Input
Enable real-time filtering as users type:
```blazor
<SfAutoComplete TValue="string" TItem="string" 
                DataSource="@Options"
                AllowFiltering="true"
                FilterType="FilterType.Contains">
</SfAutoComplete>
```

#### Pattern 2: Remote Data with Debounce
Reduce server requests with debounce delay:
```blazor
<SfAutoComplete TValue="string" TItem="Product" 
                AllowFiltering="true"
                DebounceDelay="300">
    <SfDataManager Url="api/products" Adaptor="Syncfusion.Blazor.Adaptors.ODataAdaptor"></SfDataManager>
</SfAutoComplete>
```

#### Pattern 3: Custom Item Display with Templates
Customize list item appearance:
```blazor
<SfAutoComplete TValue="string" TItem="Product" DataSource="@Products">
    <AutoCompleteTemplates TItem="Product">
        <ItemTemplate>
            <div>
                <span>@((context as Product)?.ProductName)</span>
                <span style="float:right">@((context as Product)?.Price)</span>
            </div>
        </ItemTemplate>
    </AutoCompleteTemplates>
</SfAutoComplete>
```

#### Pattern 4: Grouped & Sorted Display
Organize data with grouping and sorting:
```blazor
<SfAutoComplete TValue="string" TItem="Employee" 
                DataSource="@Employees"
                SortOrder="SortOrder.Ascending">
    <AutoCompleteFieldSettings GroupBy="Department" Value="EmployeeName"></AutoCompleteFieldSettings>
</SfAutoComplete>
```

### Key Props

| Prop | Type | Purpose |
|------|------|---------|
| `DataSource` | `IEnumerable<TItem>` | Source data for suggestions |
| `AllowFiltering` | `bool` | Enable/disable filtering |
| `FilterType` | `FilterType` | Filter mode (StartsWith, Contains, EndsWith) |
| `DebounceDelay` | `int` | Delay in ms before filter triggers |
| `MinLength` | `int` | Min characters to trigger filtering |
| `SortOrder` | `SortOrder` | Sort list items (Ascending, Descending) |
| `EnableVirtualization` | `bool` | Virtualize large datasets |
| `AllowCustom` | `bool` | Allow users to enter custom values |
| `Placeholder` | `string` | Input placeholder text |
| `FloatLabelType` | `FloatLabelType` | Floating label behavior |

### Common Use Cases

1. **Search-as-you-type:** Autocomplete on employee names, products, locations
2. **Filtered dropdowns:** Show matching items as users filter
3. **Remote APIs:** Fetch suggestions from backend services
4. **Multi-column display:** Show product details alongside names
5. **Grouped suggestions:** Organize by category or department
6. **Custom values:** Allow users to create new entries
7. **Large datasets:** Virtualize for performance with 1000+ items

---

**Next Steps:** Start with [getting-started.md](references/autocomplete-getting-started.md) for setup, or jump to the reference that matches your task.

---

## ComboBox

A comprehensive skill for implementing the ComboBox component. The ComboBox allows users to select a value from a dropdown list while also providing filtering, custom templates, cascading scenarios, data binding, and extensive customization options.

### When to Use This Skill

Use this skill when you need to:
- Install and set up the ComboBox component
- Implement ComboBox with local or remote data sources
- Configure data binding (primitive types, complex objects, collections)
- Enable and configure filtering and search functionality
- Handle value selection and change events
- Create cascading ComboBox scenarios (dependent dropdowns)
- Customize appearance with templates (items, header, footer)
- Integrate ComboBox with form validation (EditForm, data annotations)
- Configure popup settings (height, width, resize, positioning)
- Apply grouping and sorting to ComboBox data
- Handle events (ValueChange, OnValueSelect, Blur, etc.)
- Implement accessibility and keyboard navigation
- Customize styling and themes
- Troubleshoot common ComboBox issues

### Quick Start Example

```razor
@using Syncfusion.Blazor.DropDowns

<SfComboBox TItem="Country" TValue="string" 
    Placeholder="Select a country" 
    DataSource="@CountryData"
    @bind-Value="@SelectedValue">
    <ComboBoxFieldSettings Text="Name" Value="Code"></ComboBoxFieldSettings>
</SfComboBox>

@code {
    private string Sele