Autocomplete TextField With Suggestion Dropdown In Xamairn.Forms

Waleed Rafique

13 Comments

Join the conversation! Your thoughts help the community grow.

Asad Naeem4y ago
How to change the direction of this listview to upwards.
reshma masu6y ago
For large data you said to have JSON data to be serialized right ... i have that ready .. how do i link it with search bar now? can you please show me snippets of its code .. thanks in advance.... can you please reply for this?
Ahmed Nabil6y ago
Thanks for your effort , i have a problem with drop down list it`s shown with out any content but if i press on any item of list it return value , so could you help me
Mark Henke7y ago
How large volume of data??? is only 13 rows... I need possible 10000 or more to search... I will limit to only search after 3 letters!
- Waleed Rafique7y ago
  Mark you import data using json. i.e your data in json you just deserialize json and add data in ObservableCollection using loop. if you need any help more than tell me know. i am happy to help you
- Waleed Rafique7y ago
  Https://stackoverflow.com/questions/7895105/deserialize-json-with-c-sharp
ashok yadav7y ago
There is one problem here can you help me, when we add control below listview like label or button listview occupy the space, we need to overlap the listview.
Anil Jain7y ago
Simple and awesome!! Not a single error!!
- Waleed Rafique7y ago
  Thanks Anil
Laxmidhar Sahoo7y ago
Thanks for a valuable article
- Waleed Rafique7y ago
  You are welcome, Thanks :)
Kamran Kalwar7y ago
Helpful Dude????
Faiz Ahmed7y ago
Wow Man! that's great blog. It's very easy way to make autocomplete testfield.

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,

then add values in ObservableCollection through method,

And now call this method ListOfStore() in Constructor,

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,

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,