# Remote Search in .NET MAUI AutoComplete

The Remote Search functionality of the AutoComplete control allows you to take the user input, trigger custom searching algorithm and assign the results to the ItemSource of the control.

* `LoadingTemplate`(`DataTemplate`)—Defines the template of the loading view.

Implement your custom searching algorithm inside the body of the `TextChanged` event handler.

## Example

Here is an example how the RadAutoComplete Remote Search 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="autoCompleteView"
                         TextChanged="OnTextChanged"
                         TextSearchPath="Name"
                         Placeholder="Remote Search..."
                         SuggestionViewMaxHeight="200">
    <telerik:RadAutoComplete.LoadingTemplate>
        <DataTemplate>
            <HorizontalStackLayout HorizontalOptions="Center"
                                   Margin="0, 20, 0, 20">
                <Label Text="Searching... " 
                       FontSize="16" 
                       TextColor="#8E8E93"/>
                <telerik:RadBusyIndicator x:Name="busyIndicator" 
                                          HeightRequest="24" 
                                          WidthRequest="24"
                                          IsBusy="True"
                                          VerticalOptions="Start"
                                          AnimationContentColor="#8660C5"
                                          AnimationType="Animation9"/>
            </HorizontalStackLayout>
        </DataTemplate>
    </telerik:RadAutoComplete.LoadingTemplate>
    <telerik:RadAutoComplete.NoResultsTemplate>
        <DataTemplate>
            <Label Text="No match was found for the specific search. Please try again."
                   HorizontalOptions="Center"
                   VerticalOptions="Center"/>
        </DataTemplate>
    </telerik:RadAutoComplete.NoResultsTemplate>
</telerik:RadAutoComplete>
```

**4.** Create a custom searching algorithm and assign the result to the control's `ItemsSource` inside the `TextChanged` event handler:

```C#
	private void OnTextChanged(object sender, Microsoft.Maui.Controls.TextChangedEventArgs e)
	{
    var autoComplete = (RadAutoComplete)sender;
    autoComplete.ItemsSource = null;

    this.currentText = e.NewTextValue ?? "";

    if (this.currentText.Length >= autoComplete.SearchThreshold && !this.isRemoteSearchRunning)
    {
        this.isRemoteSearchRunning = true;
        Dispatcher.StartTimer(TimeSpan.FromMilliseconds(1500), () =>
        {
            this.isRemoteSearchRunning = false;
            string searchText = this.currentText.ToLower();
            autoComplete.ItemsSource = this.viewModel.Source.Where(i => i.Name.ToLower().Contains(searchText));
            return false;
        });
    }
}
```

This is the result when `LoadingTemplate` is searching for results:

![Telerik UI for .NET MAUI AutoComplete remote search showing a Searching indicator while results load](https://www.telerik.com/maui-ui/documentation/assets/3d3b60bdbc4ff8385c6337eb67bc0ba2/autocomplete-remote-search-searching.png "AutoComplete Remote Search Searching")

This is the search complete results:

![Telerik UI for .NET MAUI AutoComplete remote search showing completed client results with matching letters highlighted](https://www.telerik.com/maui-ui/documentation/assets/d9caafe3afdb4481d7938f3e73e18f06/autocomplete-remote-search-results.png "AutoComplete Remote Search Results")

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

## See Also

* [Tokens Support](https://www.telerik.com/maui-ui/documentation/controls/autocomplete/tokens-support)
* [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)