.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", "[e-mail]", "available.png"),
            new Client("Jeffery Francis", "[e-mail]", "away.png"),
            new Client("Eva Lawson", "[e-mail]", "available.png"),
            new Client("Emmett Santos", "[e-mail]", "busy.png"),
            new Client("Theresa Bryan", "[e-mail]", "available.png"),
            new Client("Jenny Fuller", "[e-mail]", "busy.png"),
            new Client("Terrell Norris", "[e-mail]", "away.png"),
            new Client("Eric Wheeler", "[e-mail]", "away.png"),
            new Client("Nida Carty", "[e-mail]", "away.png"),
            new Client("Niki Samaniego", "[e-mail]", "busy.png")
        };
    }

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

3. Use the following snippet to declare a RadAutoComplete in 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.

See Also

• Configuration
• Suggest Mode
• Display Text
• Tokens Support
• Remote Search
• Filtering
• Events
• Methods
• Templates
• Styling