How to enable typing and search functionality inside a Picker in .NET MAUI?

Question

How to enable typing and search functionality inside a Picker in .NET MAUI?

Answer 1

Hello,

You could use the Picker and SearchBar on the page, and custom the layout.

For example:

On the Page

<VerticalStackLayout>
<SearchBar Placeholder="Search items..." SearchButtonPressed="SearchBar_SearchButtonPressed"  />
<Picker x:Name="MyPicker"
  Title="Select a monkey" ItemsSource="{Binding MyList}">
</Picker>
</VerticalStackLayout>

Collection

public ObservableCollection<string> MyList { get; set; } = new ObservableCollection<string>
{
    "Baboon",
    "Capuchin Monkey",
     "Blue Monkey",
     "Squirrel Monkey",
     "Golden Lion Tamarin",
     "Howler Monkey",
     "Japanese Macaque"
 
};
public ObservableCollection<string> Results { get; set; } = new ObservableCollection<string> {  };

Match the result when press to search

private void SearchBar_SearchButtonPressed(object sender, EventArgs e)
{
 
     SearchBar searchBar = (SearchBar)sender;
 
     foreach (string item in MyList)
     {
         if (item.Equals(searchBar.Text))
         {
             Results.Add(item);
         }
     }
     if (Results.Count > 0)
     {
         MyPicker.ItemsSource = Results;
 
         MyPicker.SelectedItem = Results[0];//you could type Baboon for testing
     }
     else
     {
         MyPicker.ItemsSource = MyList;
     }
}

Best Regards,

Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.