Autocomplete TextField With Suggestion Dropdown In Xamairn.Forms

The Xamarin.Forms Autocomplete control is highly optimized to quickly load and populate suggestions from a large volume of data depending on the user’s input characters. The Autocomplete control allows the user to select one or more items from the suggestion list.

First, create the Xamarin forms project and then update the all Nuget packages in your project.

 

Write this code in your MainPage.Xaml, 

<AbsoluteLayout>
        <Entry TextChanged="SearchBar_OnTextChanged" BackgroundColor="#f9f9f9" TextColor="#FF464859" FontSize="16" PlaceholderColor="#646b7a" x:Name="searchBar" Placeholder="Type here..." AbsoluteLayout.LayoutBounds="15,70,285,38" AbsoluteLayout.LayoutFlags="None"/>
        <ListView x:Name="countryListView" IsVisible="False"   CachingStrategy="RecycleElement" BackgroundColor="White" ItemTapped="ListView_OnItemTapped" AbsoluteLayout.LayoutBounds="20,110,269,160" AbsoluteLayout.LayoutFlags="None">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Frame>
                            <StackLayout BackgroundColor="White">
                                <Label Text="{Binding .}" FontSize="16" TextColor="#FF464859"/>
                            </StackLayout>
                        </Frame>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </AbsoluteLayout>

And then write some code in MainPage.Xaml.cs class,

 

Initial declared ObservableCollection, 

ObservableCollection<string> data = new ObservableCollection<string>();

then add values in ObservableCollection through method,

public async void ListOfStore() //List of Countries
       {
           try
           {
               data.Add("Afghanistan");
               data.Add("Austria");
               data.Add("Australia");
               data.Add("Azerbaijan");
               data.Add("Bahrain");
               data.Add("Bangladesh");
               data.Add("Belgium");
               data.Add("Botswana");
               data.Add("China");
               data.Add("Colombia");
               data.Add("Denmark");
               data.Add("Kmart");
               data.Add("Pakistan");
           }
           catch (Exception ex)
           {
               await DisplayAlert("", ""+ex, "Ok");
           }
       }

And now call this method ListOfStore() in Constructor,

public MainPage()
     {
         InitializeComponent();
         ListOfStore();
     }

Now we create SearchBar_OnTextChanged method in MainPage.xaml.cs class,

private void SearchBar_OnTextChanged(object sender, TextChangedEventArgs e)
      {
          countryListView.IsVisible = true;
          countryListView.BeginRefresh();

          try
          {
              var dataEmpty = data.Where(i => i.ToLower().Contains(e.NewTextValue.ToLower()));

              if (string.IsNullOrWhiteSpace(e.NewTextValue))
                  countryListView.IsVisible = false;
              else if (dataEmpty.Max().Length == 0)
                  countryListView.IsVisible = false;
              else
                  countryListView.ItemsSource = data.Where(i => i.ToLower().Contains(e.NewTextValue.ToLower()));
          }
          catch (Exception ex)
          {
              countryListView.IsVisible = false;

          }
          countryListView.EndRefresh();

      }

Now we create ItemTapped method in MainPage.xaml.cs class,

private void ListView_OnItemTapped(Object sender, ItemTappedEventArgs e)
     {
         //EmployeeListView.IsVisible = false;

         String listsd = e.Item as string;
         searchBar.Text = listsd;
         countryListView.IsVisible = false;

         ((ListView)sender).SelectedItem = null;
     }

Here is the full code,

ObservableCollection<string> data = new ObservableCollection<string>();

       public MainPage()
       {
           InitializeComponent();
           ListOfStore();
       }

       public async void ListOfStore() //List of Countries
       {
           try
           {
               data.Add("Afghanistan");
               data.Add("Austria");
               data.Add("Australia");
               data.Add("Azerbaijan");
               data.Add("Bahrain");
               data.Add("Bangladesh");
               data.Add("Belgium");
               data.Add("Botswana");
               data.Add("China");
               data.Add("Colombia");
               data.Add("Denmark");
               data.Add("Kmart");
               data.Add("Pakistan");
           }
           catch (Exception ex)
           {
               await DisplayAlert("", ""+ex, "Ok");
           }
       }
       private void SearchBar_OnTextChanged(object sender, TextChangedEventArgs e)
       {
           countryListView.IsVisible = true;
           countryListView.BeginRefresh();

           try
           {
               var dataEmpty = data.Where(i => i.ToLower().Contains(e.NewTextValue.ToLower()));

               if (string.IsNullOrWhiteSpace(e.NewTextValue))
                   countryListView.IsVisible = false;
               else if (dataEmpty.Max().Length == 0)
                   countryListView.IsVisible = false;
               else
                   countryListView.ItemsSource = data.Where(i => i.ToLower().Contains(e.NewTextValue.ToLower()));
           }
           catch (Exception ex)
           {
               countryListView.IsVisible = false;

           }
           countryListView.EndRefresh();

       }


       private void ListView_OnItemTapped(Object sender, ItemTappedEventArgs e)
       {
           //EmployeeListView.IsVisible = false;

           String listsd = e.Item as string;
           searchBar.Text = listsd;
           countryListView.IsVisible = false;

           ((ListView)sender).SelectedItem = null;
       }

   }

Here is a simple screenshot,