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