MCPInstall

syncfusion-maui-autocomplete

Implements and configure Syncfusion .NET MAUI Autocomplete (SfAutocomplete) control for intelligent text input with suggestions. Use when implementing autocomplete, autosuggest, type-ahead search, smart search, or filtered dropdowns in .NET MAUI applications. Covers data binding, filtering modes, custom search logic, AI-powered search, multi-selection with tokens, and UI customization.

Installs
207
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/syncfusion/maui-ui-components-skills --skill syncfusion-maui-autocomplete
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads syncfusion-maui-autocomplete automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Implementing .NET MAUI Autocomplete

The Syncfusion .NET MAUI Autocomplete (SfAutocomplete) is a powerful text input control that provides intelligent suggestions as users type, enabling fast data entry and enhanced search experiences with filtering, multi-selection, and customizable UI.

When to Use This Skill

Use this skill when the user needs to:

  • Search-as-you-type interfaces - Filter and display suggestions while users type
  • Smart data entry forms - Autocomplete user input from predefined lists
  • Multi-selection input - Select multiple items with token/chip display
  • Filtered dropdowns - Search and filter large datasets efficiently
  • AI-powered search - Implement intelligent search with Azure OpenAI integration
  • Type-ahead functionality - Provide predictive text suggestions
  • Searchable combobox alternatives - Enhanced dropdown with search capabilities
  • Tag input controls - Multi-selection with visual tokens

Component Overview

The SfAutocomplete control offers:

  • Intelligent Filtering - StartsWith and Contains search modes with custom filters
  • Flexible Selection - Single or multiple selection with token/delimiter display
  • Data Binding - Bind to any data source with DisplayMemberPath and TextMemberPath
  • Custom Search Logic - Implement IAutocompleteFilterBehavior for advanced filtering
  • AI Integration - Azure OpenAI support for smart, context-aware searching
  • Rich Customization - Templates, styling, headers, footers, and highlighting
  • Performance - Async loading, pagination with LoadMore, and efficient rendering
  • Accessibility - AutomationId support, keyboard navigation, screen reader friendly

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

When implementing basic autocomplete functionality:

  • Installation and NuGet package setup (Syncfusion.Maui.Inputs)
  • Handler registration with ConfigureSyncfusionCore
  • Basic control implementation in XAML and C#
  • Data binding with ItemsSource, DisplayMemberPath, TextMemberPath
  • Placeholder configuration and basic properties
  • AutomationId for UI testing

Searching and Filtering

📄 Read: references/searching-filtering.md

When implementing search and filter logic:

  • Search based on DisplayMemberPath and TextMemberPath
  • TextSearchMode (StartsWith, Contains) configuration
  • MinimumPrefixCharacters for search delay
  • Custom filtering with IAutocompleteFilterBehavior
  • Custom search highlighting with IAutocompleteSearchBehavior
  • Async item loading with cancellation support
  • ShowSuggestionsOnFocus behavior

Selection

📄 Read: references/selection.md

When handling item selection:

  • Single vs Multiple selection modes
  • SelectedItem, SelectedItems properties
  • SelectedValue and SelectedValuePath
  • MultiSelectionDisplayMode (Token, Delimiter)
  • TokensWrapMode (Wrap, None) for token layout
  • SelectionChanging and SelectionChanged events
  • Clear button configuration
  • Clear() method for programmatic clearing

UI Customization

📄 Read: references/ui-customization.md

When customizing appearance and behavior:

  • Placeholder styling (text, color)
  • Clear button customization (icon, color, path)
  • Dropdown styling (height, width, placement, background)
  • Item templates and text styling
  • Token styling for multi-selection
  • Border and stroke customization
  • Text alignment and cursor position
  • ReturnType and keyboard behavior
  • Events (Completed, DropDownOpening, ValueChanged, etc.)

Advanced Features

📄 Read: references/advanced-features.md

When implementing advanced functionality:

  • Header and footer views in dropdown
  • Text highlighting (FirstOccurrence, MultipleOccurrence)
  • No results found customization
  • AutoSizing for dynamic control height
  • Liquid Glass Effect for modern UI (.NET 10+)

AI-Powered Features & LoadMore

📄 Read: references/ai-powered-loadmore.md

When implementing intelligent search or pagination:

  • Azure OpenAI integration for smart search
  • Custom filtering with AI service
  • Prompt engineering for accurate results
  • Offline fallback with Soundex/Levenshtein
  • LoadMore feature with MaximumSuggestion
  • LoadMore customization (text, template, events)

Troubleshooting

📄 Read: references/troubleshooting.md

When encountering issues:

  • Platform-specific limitations and workarounds
  • AOT publishing considerations
  • Performance optimization for large datasets
  • Common issues and solutions

FAQ

What does the syncfusion-maui-autocomplete skill do?

Implements and configure Syncfusion .NET MAUI Autocomplete (SfAutocomplete) control for intelligent text input with suggestions. Use when implementing autocomplete, autosuggest, type-ahead search, smart search, or filtered dropdowns in .NET MAUI applications. Covers data binding, filtering modes, custom search logic, AI-powered search, multi-selection with tokens, and UI customization.

How do I install syncfusion-maui-autocomplete?

Run npx skills add https://github.com/syncfusion/maui-ui-components-skills --skill syncfusion-maui-autocomplete in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-maui-autocomplete/ (personal) or .claude/skills/syncfusion-maui-autocomplete/ (project).

Which AI agents can use syncfusion-maui-autocomplete?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is syncfusion-maui-autocomplete safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains syncfusion-maui-autocomplete?

It is published by syncfusion in syncfusion/maui-ui-components-skills. It has 207 recorded installs.

More from syncfusion/maui-ui-components-skills

View all →

syncfusion-maui-parallax-view

syncfusion/maui-ui-components-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design224 installs

syncfusion-maui-cartesian-charts

syncfusion/maui-ui-components-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design221 installs

syncfusion-maui-button

syncfusion/maui-ui-components-skills

Implements and customize Syncfusion .NET MAUI Button (SfButton) control. Use when working with MAUI buttons, SfButton implementation, button customization, or visual states. Covers button icons, background images, RTL support, Liquid Glass effects, custom button views, button styling, events, and checkable buttons.

Frontend & Design218 installs

syncfusion-maui-listview

syncfusion/maui-ui-components-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design218 installs

syncfusion-maui-combobox

syncfusion/maui-ui-components-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design216 installs

syncfusion-maui-picker

syncfusion/maui-ui-components-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design215 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs