syncfusion-maui-autocomplete について
Syncfusion SfAutocompleteを実装する.NET MAUI開発者向けガイドです。検索可能な入力画面向けに、候補表示、フィルタリング、複数選択を扱います。
主な機能
- 01StartsWithとContainsによる検索
- 02単一選択と複数選択トークン
- 03カスタムフィルターと検索語の強調表示
- 04非同期読み込みとページネーション
- 05Azure OpenAIによるスマート検索連携
活用シーン
- 01入力中に候補を検索する画面の作成
- 02定義済みリストを使ったフォーム入力補完
- 03トークン式の複数選択入力の作成
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ syncfusion/ maui-ui-components-skills --skill syncfusion-maui-autocompleteインストール後、Claude Code で/syncfusion-maui-autocompleteを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/advanced-features.mdai-powered-loadmore.mdgetting-started.mdsearching-filtering.mdselection.mdtroubleshooting.mdui-customization.md詳細
.NET MAUI オートコンプリートの実装
Syncfusion .NET MAUI オートコンプリート(SfAutocomplete)は、ユーザーの入力に応じてインテリジェントな候補を表示する強力なテキスト入力コントロールです。フィルタリング、複数選択、カスタマイズ可能な UI により、データ入力をすばやく行い、検索エクスペリエンスを向上させます。
このスキルを使用する場面
次のようなニーズがある場合に、このスキルを使用します。
- 入力中に検索するインターフェイス - ユーザーの入力中に候補をフィルタリングして表示する
- スマートなデータ入力フォーム - 定義済みのリストからユーザーの入力を補完する
- 複数選択入力 - トークン/チップ表示で複数の項目を選択する
- フィルタリング可能なドロップダウン - 大規模なデータセットを効率的に検索してフィルタリングする
- AI を活用した検索 - Azure OpenAI と連携してインテリジェントな検索を実装する
- 入力補完機能 - 予測テキスト候補を表示する
- 検索可能なコンボボックスの代替 - 検索機能を備えた、より高機能なドロップダウンを提供する
- タグ入力コントロール - 視覚的なトークンを使って複数選択する
コンポーネントの概要
SfAutocomplete コントロールには、次の機能があります。
- インテリジェントなフィルタリング - StartsWith および Contains の検索モードとカスタムフィルター
- 柔軟な選択 - トークン/区切り文字で表示する単一選択または複数選択
- データバインディング - DisplayMemberPath と TextMemberPath を使用して、任意のデータソースにバインド
- カスタム検索ロジック - IAutocompleteFilterBehavior を実装して高度なフィルタリングを実現
- AI 連携 - Azure OpenAI による、コンテキストを考慮したスマート検索のサポート
- 豊富なカスタマイズ - テンプレート、スタイル、ヘッダー、フッター、強調表示
- パフォーマンス - 非同期読み込み、LoadMore によるページネーション、効率的な描画
- アクセシビリティ - AutomationId のサポート、キーボード操作、スクリーンリーダーへの対応
ドキュメントとナビゲーションガイド
はじめに
📄 参照先: references/getting-started.md
基本的なオートコンプリート機能を実装する場合:
- インストールと NuGet パッケージの設定(Syncfusion.Maui.Inputs)
- ConfigureSyncfusionCore を使用したハンドラーの登録
- XAML および C# での基本的なコントロールの実装
- ItemsSource、DisplayMemberPath、TextMemberPath を使用したデータバインディング
- プレースホルダーの設定と基本プロパティ
- UI テスト用の AutomationId
検索とフィルタリング
📄 参照先: references/searching-filtering.md
検索およびフィルタリングのロジックを実装する場合:
- DisplayMemberPath と TextMemberPath に基づく検索
- TextSearchMode(StartsWith、Contains)の設定
- 検索を開始するまでの入力文字数を指定する MinimumPrefixCharacters
- IAutocompleteFilterBehavior を使用したカスタムフィルタリング
- IAutocompleteSearchBehavior を使用したカスタム検索の強調表示
- キャンセルに対応した非同期項目読み込み
- ShowSuggestionsOnFocus の動作
選択
📄 参照先: references/selection.md
項目の選択を処理する場合:
- 単一選択モードと複数選択モード
- SelectedItem、SelectedItems プロパティ
- SelectedValue と SelectedValuePath
- MultiSelectionDisplayMode(Token、Delimiter)
- トークンのレイアウトを指定する TokensWrapMode(Wrap、None)
- SelectionChanging イベントと SelectionChanged イベント
- クリアボタンの設定
- プログラムからクリアする Clear() メソッド
UI のカスタマイズ
📄 参照先: references/ui-customization.md
外観や動作をカスタマイズする場合:
- プレースホルダーのスタイル設定(テキスト、色)
- クリアボタンのカスタマイズ(アイコン、色、パス)
- ドロップダウンのスタイル設定(高さ、幅、配置、背景)
- 項目テンプレートとテキストのスタイル設定
- 複数選択時のトークンのスタイル設定
- 境界線とストロークのカスタマイズ
- テキストの配置とカーソル位置
- ReturnType とキーボードの動作
- イベント(Completed、DropDownOpening、ValueChanged など)
高度な機能
📄 参照: references/advanced-features.md
高度な機能を実装する場合:
- ドロップダウンのヘッダービューとフッタービュー
- テキストのハイライト表示(FirstOccurrence、MultipleOccurrence)
- 「結果が見つかりません」のカスタマイズ
- 動的なコントロールの高さに対応する AutoSizing
- モダンな UI のための Liquid Glass 効果(.NET 10+)
AI を活用した機能と LoadMore
📄 参照: references/ai-powered-loadmore.md
インテリジェント検索やページネーションを実装する場合:
- スマート検索のための Azure OpenAI 統合
- AI サービスを使ったカスタムフィルタリング
- 正確な結果を得るためのプロンプトエンジニアリング
- Soundex/Levenshtein によるオフライン時のフォールバック
- MaximumSuggestion を使用した LoadMore 機能
- LoadMore のカスタマイズ(テキスト、テンプレート、イベント)
トラブルシューティング
📄 参照: references/troubleshooting.md
問題が発生した場合:
- プラットフォーム固有の制限と回避策
- AOT 公開時の考慮事項
- 大規模なデータセットのパフォーマンス最適化
- よくある問題と解決策