Xamarin forms Entry with suggestion items in a listview popup when typing the text in it

Question

I have an Entry field. And a list of items which I'm fetching it from Database.

I need to show the list popup when typing in the Entry with those items from DB and filter those based on the string.

If the user finds the name in the list, he can select the one and it should display in the Entry followed by space and the user can enter one more string. (similar to entering email addresses in Gmail). If the user doesn't find the name in the list, he can type the particular name and after hitting space he should be able to enter the new string.

I found there is nuget packgae from SyncFusion. Can we achieve this without using any third party libs?

Yes you can implement your own autocomplete entry you don't need any third party libs for that. — N Subedi, Jan 17 '19 at 23:04
how to implement? can you please explain the steps for design and code? — Sai Sunkari, Jan 17 '19 at 23:27
See https://stackoverflow.com/questions/38417979/xamarin-forms-autocomplete-crossplatform. — Christopher Stephan, Jan 18 '19 at 08:40
Have a look at [Xfx.Controls](https://github.com/XamFormsExtended/Xfx.Controls). — Tom, Jan 18 '19 at 08:50
I manually added entry and listview in a grid and on tapping of list item name is populated on entry field. Now when I again tap on Entry field I should able to type new text and the filter list should work without considering the first selected text. — Sai Sunkari, Jan 21 '19 at 18:46

sermet · Answer 1 · 2019-01-20T10:33:58.147

You can place listview below of the entry:

In XAML:

<Grid>
<Grid.RowDefinitions>
    <RowDefinition Height="40" />
    <RowDefinition Height="40" />                    
</Grid.RowDefinitions>    
        <Entry
            x:Name="entryMain"
            Grid.Row="0"
            TextChanged="OnEntryChanged" />
        <ListView
            x:Name="lstSuggest"
            Grid.Row="1"
            IsVisible="False"
            ItemTapped="ItemSelected"
            SeparatorVisibility="None" />
</Grid>

Code Behind:

lstSuggest.ItemsSource = _suggestion;

private void OnEntryChanged(object sender, TextChangedEventArgs e)
{            
    if (entryMain.Text != null && lstSuggest.ItemsSource != null)
    {                  
        if (_suggestion.Any(x=> x.StartsWith(e.NewTextValue)) && entryMain.Text != string.Empty)
        {
            var items = new List<string>();

            foreach (var item in _suggestion.FindAll(x => x.StartsWith(e.NewTextValue)))
            {
                items.Add(item);
            }

            lstSuggest.ItemsSource = items;
            lstSuggest.IsVisible = true;
        }
        else
        { 
            lstSuggest.IsVisible = false;
        }
    }
}

private void ItemSelected(object sender, EventArgs args)
{
    if (((ListView)sender).SelectedItem == null)
        return;

    entryMain.Text = lstSuggest.SelectedItem.ToString();
    ((ListView)sender).SelectedItem = null;
    lstSuggest.IsVisible = false;
}

In addition, if you want remove listview horizontal scrollbar visibility, you can create custom control.

Bonus: Android default https://learn.microsoft.com/tr-tr/xamarin/android/user-interface/controls/auto-complete

also how to give space after selecting the item in the entry and when typing again it should show the same filter list like entering email addresses in gmail? — Sai Sunkari, Jan 21 '19 at 18:08

score 0 · Answer 2 · answered Jan 19 '19 at 10:51

I would suggest to use EntryAutoComplete package

The usage is quite simple, just add the NuGet to your solution, then, your page just:

Reference the assembly namespace

xmlns:customControl="clr-namespace:EntryAutoComplete;assembly=EntryAutoComplete"

And then,

<customControl:EntryAutoComplete
            VerticalOptions="CenterAndExpand"
            Placeholder="Enter country..." 
            ItemsSource="{Binding Countries}"
            SearchText="{Binding SearchCountry}"
            SearchMode="{Binding SearchMode}"
            MaximumVisibleElements="5"/>

Xamarin forms Entry with suggestion items in a listview popup when typing the text in it

2 Answers2

Linked