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

.NET MAUI AutoComplete Data Binding

For all cases where the business items are not simple strings, data-binding is necessary to correctly visualize information. The AutoComplete for .NET MAUI component supports data binding in the form of path properties.

TextSearchPath(string)—Defines the name of the property the search function will be executed against.

The TextSearchPath property is required in data-binding scenarios.

The AutoComplete component provides a default template for suggestion items that cannot be modified. You can use a custom template if you need to customize the suggestion items.

Example

Here is an example how the RadAutoComplete Data Binding works:

1. 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; }
}

2. 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; }
}

3. Use the following snippet to declare a RadAutoComplete in XAML:

xaml

<telerik:RadAutoComplete x:Name="autoComplete"
                         ItemsSource="{Binding Source}"
                         TextSearchPath="Name"
                         Placeholder="Show Suggestions on focus">
    <telerik:RadAutoComplete.BindingContext>
        <local:ClientsViewModel/>
    </telerik:RadAutoComplete.BindingContext>
</telerik:RadAutoComplete>

For AutoComplete Data Binding example refer to the SDKBrowser Demo application.

.NET MAUI AutoComplete Data Binding

Example

See Also