CODEWITHSUNDEEP
xamarin.forms
chung
chung

Reputation: 1133

Showing search options on click for Xamarin Forms SearchBar

Is there any way I can use the SearchBar in Xamarin Forms and make it so that once I click it, it will automatically choose show suggestions of my choosing as kind of a drop down, and then once the suggestion is clicked, it will fill the search bar with the text?

Looking like this: enter image description here

BUT the main difference is that the user doesn't have to type in r for the suggestion to be available. The suggestion just appears as soon as the user clicks on the search bar.

Thanks

Upvotes: 1

Views: 960

Answers (1)

Mouse On Mars
Mouse On Mars

Reputation: 1132

So you would add your suggestions to a a collection which is only visible when there are items in it. Once the user types something worthy of suggesting some options you would add to this collection. If the user selects an option or continues to type you need to clear/update the collection.

Code

ObservableCollection<SuggestionViewModel> SuggestionCollection { get; } = new ObservableCollection<SuggestionViewModel>(); 


public SuggestionViewModel
{
   public string Name {get; set;}
}

XAML

<StackLayout> 
    <SearchBar Placeholder="Search" Text="{Binding SearchText}"/> 
    <StackLayout BindableLayout.ItemsSource="{Binding SuggestionCollection}"
                 Orientation="Vertical">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <Label Text={Binding Name}>
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </StackLayout>
</StackLayout>

You will need to "overlay" the piece of xaml with your ContentView so the suggestion stacklayout does not interfere with your initial ContentView layout. Something like this

<Grid>
   <StackLayout>
   </StackLayout>
   <ContentView>
   </ContentView>
</Grid>

Upvotes: 2

Related Questions