new control AutoComplete API Design

[prabhav-mehra]

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

[prabhav-mehra]

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

[peruchali]

@zleao I'm not sure about how the licensing works.. The code from @dotMorten is licensed under Apache 2.0 (less permissible) while yours (@zleao) is under MIT (more permissible).

[david-d-le]

Hi,
I have forked modified the code from @zleao and added ItemTemplate inspired from Microsoft's solution with SearchHandler from .NET MAUI Shell search.
Now it works in two ways. If ItemTemplate provided, the items are formatted with given ItemTemplate:

In the view the template is given through XAML:

<zoft:AutoCompleteEntry Placeholder="Search for a country or group"
                        ItemsSource="{Binding FilteredList}"
                        Text="{Binding Text}"
                        TextMemberPath="Country"
                        TextChangedCommand="{Binding TextChangedCommand}"
                        CursorPosition="{Binding CursorPosition, Mode=TwoWay}"
                        SelectedSuggestion="{Binding SelectedItem}"
                        Completed="AutoCompleteEntry_Completed"
                        ClearButtonVisibility="Never"
                        HeightRequest="50">
    <zoft:AutoCompleteEntry.ItemTemplate>
        <DataTemplate x:DataType="vm:ListItem">
            <Grid ColumnDefinitions="auto, *">
                <Label Grid.Column="0" Text="{Binding Group}" FontSize="Large" BackgroundColor="Red"/>
                <Label Grid.Column="1" Text="{Binding Country}" FontSize="Large" BackgroundColor="Yellow"/>
            </Grid>
        </DataTemplate>
    </zoft:AutoCompleteEntry.ItemTemplate>
</zoft:AutoCompleteEntry>

If no template is given, default tempalte is used - copied from Microsoft's SearchHandler solution:

However there is no solution yet for other Platforms (I am working only with android).
Source code is available here: https://github.com/david-d-le/zoft.MauiExtensions.AutoCompleteEntry

Also @peruchali I am also not sure about licencing. Can someone give us feedback/permission if it is feasible solution? @dotMorten, @zleao, @bijington?

Thanks

[peruchali]

This is very cool!

[zleao]

This is very cool indeed!
From my side, I see no problems to use the AutoCompleteEntry to create this AutoComplete control.

[zleao]

@david-d-le , please see this issue. Maybe you could PR your changes into a feature branch in the AutCompleteEntry repo and we can work from there to add support to other platforms.