How to add missing item to the AutoCompleteView ItemsSource

Environment

Product Version	2018.3.1122.3
Product	AutoCompleteView for Xamarin
Xamarin.Forms	3.4

Description

This article shows how to add no match item to the AutoCompleteView ItemsSource.

Solution

Create a business object, for example type Client with the following properties:

public class Client
{
    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; }
}

and the needed ViewModel:

public class ViewModel
{
    public ObservableCollection<Client> Source { get; set; }
    public ViewModel()
    {
        this.Source = new ObservableCollection<Client>()
        {
            new Client("Freda Curtis", "[e-mail]"),
            new Client("Jeffery Francis", "[e-mail]"),
            new Client("Eva Lawson", "[e-mail]"),
            new Client("Emmett Santos", "[e-mail]"),
            new Client("Theresa Bryan", "[e-mail]"),
            new Client("Jenny Fuller", "[e-mail]"),
            new Client("Terrell Norris", "[e-mail]"),
            new Client("Eric Wheeler", "[e-mail]"),
            new Client("Nida Carty", "[e-mail]"),
            new Client("Niki Samaniego", "[e-mail]")
        };
    }
}

Define the RadAutoCompleteView in XAML:

<StackLayout>
    <telerikInput:RadAutoCompleteView ItemsSource="{Binding Source}"
                                            x:Name="autoCompleteView"
                                            DisplayMode="Tokens" 
                                            Watermark="Search for Name"
                                            TextSearchPath="Name">
        <telerikInput:RadAutoCompleteView.NoResultsTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Label Text="No Result: " 
                           HorizontalTextAlignment="Center" 
                           VerticalTextAlignment="Center"
                           VerticalOptions="Center" 
                           HorizontalOptions="Center" 
                           FontSize="15"/>
                    <Button Text="Add" Clicked="Button_Clicked" Grid.Column="1"/>
                </Grid>
            </DataTemplate>
        </telerikInput:RadAutoCompleteView.NoResultsTemplate>
    </telerikInput:RadAutoCompleteView>
</StackLayout>

And add Clicked event to the Button and in code behind use the following snippet:

private void Button_Clicked(object sender, System.EventArgs e)
{
    var searchText = this.autoCompleteView.Text;
    if (!string.IsNullOrEmpty(searchText))
    {
        var newClient = new Client(searchText, string.Empty);
        this.vm.Source.Add(newClient);
        this.autoCompleteView.Tokens.Add(newClient);
        this.autoCompleteView.Text = string.Empty;
    }
}

Finaly add the BindingContext to be ViewModel

private ViewModel vm;

    public MainPage()
    {
        InitializeComponent();
        this.vm = new ViewModel();
        this.BindingContext = this.vm;
    }