New to Telerik UI for .NET MAUI? Start a free 30-day trial

.NET MAUI AutoComplete Suggest Mode

AutoComplete exposes three different modes for providing suggestions:

  • Suggest—Provides a drop-down list of options for you to pick from;
  • Append—Provides an inline display of the first suggestion;
  • SuggestAppend—Combines the functionality of the two options above, shows a drop-down with suggestions and at the same time selects the first one from the list.

In order to choose any of those modes use the SuggestMode property of the control. The default SuggestMode is Suggest.

Example

Here is an example how the AutoComplete Suggest Mode functionality works:

Create the needed business objects, for example type Client with the following properties:

public class Client
{
    public Client() { }

    public Client(string name, string imageSource)
    {
        this.Name = name;
        this.ImageSource = imageSource;
    }

    public Client(string name, string email, string imageSource)
    {
        this.Name = name;
        this.Email = email;
        this.ImageSource = imageSource;
    }

    public string Name { get; set; }
    public string Email { get; set; }
    public string ImageSource { get; set; }
}

Create a ViewModel with a collection of Client objects:

public class ClientsViewModel
{
    public ClientsViewModel()
    {
        this.Source = new ObservableCollection<Client>()
        {
            new Client("Freda Curtis", "fcurtis@mail.com", "available.png"),
            new Client("Jeffery Francis", "jfrancis@mail.com", "away.png"),
            new Client("Eva Lawson", "elawson@mail.com", "available.png"),
            new Client("Emmett Santos", "esantos@mail.com", "busy.png"),
            new Client("Theresa Bryan", "tbryan@mail.com", "available.png"),
            new Client("Jenny Fuller", "jfuller@mail.com", "busy.png"),
            new Client("Terrell Norris", "tnorris@mail.com", "away.png"),
            new Client("Eric Wheeler", "ewheeler@mail.com", "away.png"),
            new Client("Nida Carty", "ncarty@mail.com", "away.png"),
            new Client("Niki Samaniego", "nsamaniego@mail.com", "busy.png")
        };
    }

    public ObservableCollection<Client> Source { get; set; }
}

Example when SuggestMode="Suggest":

<telerik:RadAutoComplete x:Name="autoCompleteSuggest"
                         SuggestMode="Suggest"
                         ItemsSource="{Binding Source}"
                         TextSearchPath="Name"
                         Placeholder="Search"
                         SuggestionViewHeight="150"/>

Here is the result when SuggestMode is set to Suggest:

AutoComplete Suggest

Exmaple when SuggestMode="Append":

<telerik:RadAutoComplete x:Name="autoCompleteAppend"
                         SuggestMode="Append"
                         ItemsSource="{Binding Source}"
                         TextSearchPath="Name"
                         Placeholder="Search"
                         SuggestionViewHeight="150"/>

And the final result:

AutoComplete Append

Example when SuggestMode="SuggestAppend":

<telerik:RadAutoComplete x:Name="autoCompleteSuggestAppend"
                         SuggestMode="SuggestAppend"
                         ItemsSource="{Binding Source}"
                         TextSearchPath="Name"
                         Placeholder="Search"
                         SuggestionViewHeight="100"/>

Here is the result:

AutoComplete SuggestAppend

For AutoComplete Suggest Mode example refer the SDKBrowser Demo application.

See Also

In this article
Not finding the help you need?