new control AutoComplete API Design

[s3743761]

A new control AutoComplete which will have the following API design

Autocomplete Control

The Autocomplete control provides a user-friendly way to input text by suggesting possible matches as the user types. This README provides an overview of the Autocomplete control and its usage.

Features

• Auto-suggestion based on user input.
• Configurable properties to customize behavior.
• Ability to provide custom UI for suggestion view using DataTemplate.

Installation

The AutoComplete control is part of the CommunityToolkit.Maui.Controls library and can be used in your MAUI projects.

Usage

Properties

1. ItemsSource: IList<object> - Collection of items to be displayed in the autocomplete dropdown.

   • Default: Empty list

2. SearchProperty: string - Name of the property to search for in each item.

   • Default: Empty string

3. IsAutoFillEnabled: bool - Indicates whether the entry should be auto-filled with the selected item's text.

   • Default: true

4. SuggestionTemplate: DataTemplate - Custom template used to render the suggestions in the dropdown.

Events

1. ItemSelected: Raised when an item is selected from the autocomplete dropdown.
   • Event Arguments: ItemSelectedEventArgs containing the selected item.

Example Usage (XAML)

<local:AutoComplete x:Name="autocomplete"
                         Placeholder="Search"
                         ItemsSource="{Binding Fruits}"
                         SearchProperty="Name"
                         IsAutoFillEnabled="true"
                         SuggestionTemplate="{StaticResource CustomSuggestionTemplate}"
                         ItemSelected="Autocomplete_ItemSelected" />

Remarks

• I am thinking it would extend the Entry class as a base class so will inherit all of its functionality like TextChanged etc.
• The SuggestionTemplate property allows users to specify a custom DataTemplate for rendering suggestions in the dropdown.
• Users can define the appearance and layout of each suggestion item using XAML markup or code-behind and assign it to the -SuggestionTemplate property.
• The IsAutoFillEnabled property determines whether the autocomplete entry should be auto-filled with the selected item's text.
• The ItemSelected event provides a way for users to handle item selection events.
• As a future improvement: a way to customize the selected item UI

@pictos @bijington @ThysBrits

[s3743761]

telerik has a similar control https://www.telerik.com/maui-ui/autocomplete

[david-d-le]

I personally think both options are not ideal. Commercial options are limited - for example devexpress is free but only until May 31, 2024 which means end of support of free option after this date and mentioned version. Other commercial options do not have open source code which is also not great. And let's be real, it is also behind paywall which no one wants I think.

In relation to open source options these are coming from "unknown" sources which is usable but there is no guarantee for future support.
I don't think we would need to implement it from the start but use solutions from others I have mentioned before. I am actually using these but there are TODOs and little bugs etc.

Please don't take me word for word it is just my opinion.

[peruchali]

Is there any update on this? Form input is pretty tedious without autocomplete :(

[david-d-le]

Maybe it is a question directly for the MAUI team, but there is something similar already implemented in MAUI itself (as I understood from the docs) here: .NET MAUI Shell search.

However, it is specific to only one use case in the shell (I haven't personally used it), and I don't know if this code can be used as AutoComplete entry.

It is not perfect but close to what was proposed in the original question. If MAUI is not planning to implement this as an Entry usable in other cases than Shell search, I would love this to be in the Community Toolkit as a reusable component.

Maybe @bijington can tell us if they will consider this discussion or not? :)

[bijington]

The general rule is we want to see activity on discussions like this from the community. I think we want at least 10 upvotes to push it through to being considered. But then someone needs to be willing to implement it and potentially maintain it also.

The implementation is all of the following to:

• implementing the functionality
• adding samples to the sample app
• adding unit tests
• adding documentation

Is anyone in this discussion willing to contribute?

[peruchali]

Maybe it is a question directly for the MAUI team, but there is something similar already implemented in MAUI itself (as I understood from the docs) here: .NET MAUI Shell search.

However, it is specific to only one use case in the shell (I haven't personally used it), and I don't know if this code can be used as AutoComplete entry.

It is not perfect but close to what was proposed in the original question. If MAUI is not planning to implement this as an Entry usable in other cases than Shell search, I would love this to be in the Community Toolkit as a reusable component.

Maybe @bijington can tell us if they will consider this discussion or not? :)

Yes, the MAUI Shell Search is pretty close to the original API design. Today a SearchBar doesn't seem much more than a glorified Entry control. It seems sufficient if a SearchHandler could be hooked up to any SearchBar and provide the Shell Search-like experience of showing results in the drop down.

[davefxy]

There is a working example for an Autocompletion control called AutoSuggestBox at https://github.com/dotMorten/MauiEx