# .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](https://www.telerik.com/maui-ui/documentation/controls/autocomplete/templates/suggestionitem-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:

```C#
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:

```C#
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>
```

> important For AutoComplete Data Binding example refer to the [SDKBrowser Demo application](https://www.telerik.com/maui-ui/documentation/demos-and-sample-apps/sdkbrowser-app).

## See Also

* [Configuration](https://www.telerik.com/maui-ui/documentation/controls/autocomplete/configuration)
* [Suggest Mode](https://www.telerik.com/maui-ui/documentation/controls/autocomplete/suggest-mode)
* [Display Text](https://www.telerik.com/maui-ui/documentation/controls/autocomplete/display-text)
* [Tokens Support](https://www.telerik.com/maui-ui/documentation/controls/autocomplete/tokens-support)
* [Remote Search](https://www.telerik.com/maui-ui/documentation/controls/autocomplete/remote-search)
* [Filtering](https://www.telerik.com/maui-ui/documentation/controls/autocomplete/filtering)
* [Events](https://www.telerik.com/maui-ui/documentation/controls/autocomplete/events)
* [Methods](https://www.telerik.com/maui-ui/documentation/controls/autocomplete/methods)
* [Templates](https://www.telerik.com/maui-ui/documentation/controls/autocomplete/templates/overview)
* [Styling](https://www.telerik.com/maui-ui/documentation/controls/autocomplete/styling)