zoft.MauiExtensions.Controls.AutoCompleteEntry 3.0.1

There is a newer version of this package available.
See the version list below for details.

dotnet add package zoft.MauiExtensions.Controls.AutoCompleteEntry --version 3.0.1

NuGet\Install-Package zoft.MauiExtensions.Controls.AutoCompleteEntry -Version 3.0.1

This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.

<PackageReference Include="zoft.MauiExtensions.Controls.AutoCompleteEntry" Version="3.0.1" />

For projects that support PackageReference, copy this XML node into the project file to reference the package.

paket add zoft.MauiExtensions.Controls.AutoCompleteEntry --version 3.0.1

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

#r "nuget: zoft.MauiExtensions.Controls.AutoCompleteEntry, 3.0.1"

#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.

// Install zoft.MauiExtensions.Controls.AutoCompleteEntry as a Cake Addin
#addin nuget:?package=zoft.MauiExtensions.Controls.AutoCompleteEntry&version=3.0.1

// Install zoft.MauiExtensions.Controls.AutoCompleteEntry as a Cake Tool
#tool nuget:?package=zoft.MauiExtensions.Controls.AutoCompleteEntry&version=3.0.1

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

zoft.MauiExtensions.Controls.AutoCompleteEntry

Entry control that makes suggestions to users as they type.

NOTE: This control is based on the awesome dotMortem/XamarinFormsControls/AutoSuggestBox. with some simplifications and modifications of my own.

Getting Started

Instalation

Add NuGet Package to your project:

dotnet add package zoft.MauiExtensions.Controls.AutoCompleteEntry`

You can find the nuget package here zoft.MauiExtensions.Controls.AutoCompleteEntry

Initialize the library in your MauiProgram.cs file:

using CommunityToolkit.Maui;
using zoft.MauiExtensions.Controls;

namespace AutoCompleteEntry.Sample
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .UseMauiCommunityToolkit()
                .UseZoftAutoCompleteEntry()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                });

            return builder.Build();
        }
    }
}

How to Use

The filtering of results, happens as the user types and you'll only need to respond to 2 actions:

Binding based

TextChangedCommand: Triggered every time the user changes the text. Receives the current text as parameter;
SelectedSuggestion: Holds the currently selected option;

Event based

TextChanged: Event raised every time the user changes the text. The current text is part of the event arguments;
SuggestionChosen: Event raised every time a suggestion is chosen. The selected option is part of the event arguments;

XAML Usage

In order to make use of the control within XAML you can use this namespace:

xmlns:zoft="http://zoft.MauiExtensions/Controls"

Sample Using Bindings

<ContentPage ...
             xmlns:zoft="http://zoft.MauiExtensions/Controls"
             ...>

    <zoft:AutoCompleteEntry Placeholder="Search for a country or group"
                            ItemsSource="{Binding FilteredList}"
                            TextMemberPath="Country"
                            DisplayMemberPath="Country"
                            TextChangedCommand="{Binding TextChangedCommand}"
                            SelectedSuggestion="{Binding SelectedItem}"/>
</ContentPage>

internal partial class ListItem : ObservableObject
{
    [ObservableProperty]
    public string _group;

    [ObservableProperty]
    public string _country;
}

internal partial class SampleViewModel : CoreViewModel
{
    private readonly List<ListItem> Teams  = new List<ListItem>() { ... }
    
    [ObservableProperty]
    private ObservableCollection<ListItem> _filteredList;

    [ObservableProperty]
    private ListItem _selectedItem;

    public Command<string> TextChangedCommand { get; }

    public SampleViewModel()
    {
        FilteredList = new(Teams);
        SelectedItem = null;
        TextChangedCommand = new Command<string>(FilterList);
    }

    private void FilterList(string filter)
    {
        SelectedItem = null;
        FilteredList.Clear();

        FilteredList.AddRange(Teams.Where(t => t.Group.Contains(filter, StringComparison.CurrentCultureIgnoreCase) ||
                                               t.Country.Contains(filter, StringComparison.CurrentCultureIgnoreCase)));
    }
}

Sample Using Events

<ContentPage ...
             xmlns:zoft="http://zoft.MauiExtensions/Controls"
             ...>

    <zoft:AutoCompleteEntry Placeholder="Search for a country or group"
                            ItemsSource="{Binding FilteredList}"
                            TextMemberPath="Country"
                            DisplayMemberPath="Country"
                            TextChanged="AutoCompleteEntry_TextChanged"
                            SuggestionChosen="AutoCompleteEntry_SuggestionChosen"/>
</ContentPage>

private void AutoCompleteEntry_TextChanged(object sender, zoft.MauiExtensions.Controls.AutoCompleteEntryTextChangedEventArgs e)
{
    // Filter only when the user is typing
    if (e.Reason == zoft.MauiExtensions.Controls.AutoCompleteEntryTextChangeReason.UserInput)
    {
        //Filter the ItemsSource, based on text
        ViewModel.FilterList((sender as zoft.MauiExtensions.Controls.AutoCompleteEntry).Text);
    }
}

private void AutoCompleteEntry_SuggestionChosen(object sender, zoft.MauiExtensions.Controls.AutoCompleteEntrySuggestionChosenEventArgs e)
{
    //Set the SelectedItem provided by the event arguments
    ViewModel.SelectedItem = e.SelectedItem as ListItem;
}

Windows

Android

iOS

MacCatalyst

Product	Compatible and additional computed target framework versions.
.NET	net8.0 is compatible. net8.0-android was computed. net8.0-android34.0 is compatible. net8.0-browser was computed. net8.0-ios was computed. net8.0-ios17.2 is compatible. net8.0-maccatalyst was computed. net8.0-maccatalyst17.2 is compatible. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. net8.0-windows10.0.19041 is compatible.

Compatible target framework(s)

Included target framework(s) (in package)

Learn more about Target Frameworks and .NET Standard.

net8.0
- Microsoft.Maui.Controls (>= 8.0.40)
- Microsoft.Maui.Controls.Compatibility (>= 8.0.40)
- zoft.MauiExtensions.Core (>= 3.0.0)
net8.0-android34.0
- Microsoft.Maui.Controls (>= 8.0.40)
- Microsoft.Maui.Controls.Compatibility (>= 8.0.40)
- zoft.MauiExtensions.Core (>= 3.0.0)
net8.0-ios17.2
- Microsoft.Maui.Controls (>= 8.0.40)
- Microsoft.Maui.Controls.Compatibility (>= 8.0.40)
- zoft.MauiExtensions.Core (>= 3.0.0)
net8.0-maccatalyst17.2
- Microsoft.Maui.Controls (>= 8.0.40)
- Microsoft.Maui.Controls.Compatibility (>= 8.0.40)
- Microsoft.Maui.Graphics (>= 8.0.40)
- zoft.MauiExtensions.Core (>= 3.0.0)
net8.0-windows10.0.19041
- Microsoft.Maui.Controls (>= 8.0.40)
- Microsoft.Maui.Controls.Compatibility (>= 8.0.40)
- zoft.MauiExtensions.Core (>= 3.0.0)

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version	Downloads	Last updated
3.0.8	1,696	8/30/2024
3.0.7	108	8/29/2024
3.0.6	118	8/28/2024
3.0.5	128	8/27/2024
3.0.4	118	8/26/2024
3.0.3	131	8/23/2024
3.0.2	2,261	5/24/2024
3.0.1	109	5/23/2024
3.0.0	129	5/23/2024
2.0.0	6,966	4/8/2023
1.0.0	630	12/16/2022
1.0.0-RC4	131	12/15/2022
1.0.0-RC3	134	12/15/2022
1.0.0-RC2	142	12/15/2022
1.0.0-RC1	131	11/27/2022

Fix for keyboard dismiss on iOS/MacOS