zoft.MauiExtensions.Controls.AutoCompleteEntry 3.0.8

.NET 8.0 This package targets .NET 8.0. The package is compatible with this framework or higher. 
dotnet add package zoft.MauiExtensions.Controls.AutoCompleteEntry --version 3.0.8                

                    
                

            
NuGet\Install-Package zoft.MauiExtensions.Controls.AutoCompleteEntry -Version 3.0.8
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.8" />
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.8                

                    
                

            
#r "nuget: zoft.MauiExtensions.Controls.AutoCompleteEntry, 3.0.8"
#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.8

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

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.

NuGet

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

<br/>

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();
        }
    }
}

<br/>

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;

<br/>

XAML Usage

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

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

<br/>

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}"
                            CursorPosition="{Binding CursorPosition, Mode=TwoWay}"
                            SelectedSuggestion="{Binding SelectedItem}"
                            Completed="AutoCompleteEntry_Completed"
                            ClearButtonVisibility="Never"
                            HeightRequest="50"/>
</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;

	[ObservableProperty]
    private int _cursorPosition;

    public SampleViewModel()
    {
        FilteredList = new(Teams);
        SelectedItem = null;
    }

    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)));
    }

	[RelayCommand]
    private void TextChanged(string text)
    {
        FilterList(text);
    }
}

<br/>

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"
                            CursorPosition="{Binding CursorPosition, Mode=TwoWay}"
                            CursorPositionChanged="AutoCompleteEntry_CursorPositionChanged"
                            SuggestionChosen="AutoCompleteEntry_SuggestionChosen"
                            Completed="AutoCompleteEntry_Completed"
                            ClearButtonVisibility="WhileEditing"
                            HeightRequest="50"/>
</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;
}

<br/> <br/>

Windows
alternate text is missing from this package README image alternate text is missing from this package README image alternate text is missing from this package README image alternate text is missing from this package README image
Android
alternate text is missing from this package README image alternate text is missing from this package README image alternate text is missing from this package README image alternate text is missing from this package README image
iOS
alternate text is missing from this package README image alternate text is missing from this package README image alternate text is missing from this package README image alternate text is missing from this package README image
MacCatalyst
alternate text is missing from this package README image alternate text is missing from this package README image alternate text is missing from this package README image alternate text is missing from this package README image
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.5 is compatible.  net8.0-maccatalyst was computed.  net8.0-maccatalyst17.5 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.

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 2,326 8/30/2024
3.0.7 119 8/29/2024
3.0.6 126 8/28/2024
3.0.5 139 8/27/2024
3.0.4 125 8/26/2024
3.0.3 139 8/23/2024
3.0.2 2,443 5/24/2024
3.0.1 120 5/23/2024
3.0.0 139 5/23/2024
2.0.0 7,103 4/8/2023
1.0.0 643 12/16/2022
1.0.0-RC4 134 12/15/2022
1.0.0-RC3 137 12/15/2022
1.0.0-RC2 145 12/15/2022
1.0.0-RC1 134 11/27/2022

Add support for ReturnType