xamarin-forms-docs/knowledge-base/autocompleteview-add-items-to-the-collection.md

title	description	type	page_title	slug	position	tags	ticketid	res_type
How to add missing item to the AutoCompleteView ItemsSource	when no result found, add the item to the ItemsSource	how-to	How to add item to the AutoCompleteView collection	autocompleteview-add-items-to-the-source		AutoCompleteView, Tokens, Xamarin, Telerik UI for Xamarin	1364788	kb

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", "fcurtis@mail.com"),
        	new Client("Jeffery Francis", "jfrancis@mail.com"),
       		new Client("Eva Lawson", "elawson@mail.com"),
            new Client("Emmett Santos", "esantos@mail.com"),
            new Client("Theresa Bryan", "tbryan@mail.com"),
            new Client("Jenny Fuller", "jfuller@mail.com"),
            new Client("Terrell Norris", "tnorris@mail.com"),
            new Client("Eric Wheeler", "ewheeler@mail.com"),
            new Client("Nida Carty", "ncarty@mail.com"),
            new Client("Niki Samaniego", "nsamaniego@mail.com")
		};
	}
}

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;
	}