Reputation: 373
I have a need for a picker-type control in my MAUI app, but the selection list contains over 1000 entries. I don't want to make my users scroll through 1000 entries to find the one they want to choose. Secondarily, that is a lot of data to get from my API every time the page is accessed, but I can figure that out.
Is there something in .Net MAUI that is equivalent to the HTML Datalist, where there's an input box and as the user types, the list condenses down to what they type - like a search box. All I can find on the Microsoft docs is the Picker. I'd like to not have to pay for a third-party control if possible.
https://www.w3schools.com/tags/tag_datalist.asp
Here is what the Search/List looks like -- it could work if
Upvotes: 1
Views: 467
Reputation: 10148
As suggested by Jason ans Steve, you can use a SearchBar
with a ListView
or CollectionView. Here's the sample code below for your reference:
Model:
public class Notes
{
public string Name { get; set; }
public string Num { get; set; }
}
Xaml:
<VerticalStackLayout>
<SearchBar TextChanged="SearchBar_TextChanged"></SearchBar>
<ListView x:Name="list">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Name}" Detail="{Binding Num}">
</TextCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</VerticalStackLayout>
Code-behind:
public partial class MainPage : ContentPage
{
public ObservableCollection<Notes> notedata;
public MainPage()
{
InitializeComponent();
//data service
generateData();
BindingContext = this;
}
public void generateData()
{
notedata = new ObservableCollection<Notes>()
{
new Notes(){Name = "alex", Num = "2323423"},
new Notes(){Name = "bloomberg", Num = "12323423"},
new Notes(){ Name = "ahmed", Num = "32323423"},
new Notes(){ Name = "abc", Num = "42323423"},
new Notes(){ Name = "umair", Num = "62323423"},
new Notes(){ Name = "etc", Num = "32323423"},
};
}
private void SearchBar_TextChanged(object sender, TextChangedEventArgs e)
{
//all you need to make a search
if (string.IsNullOrEmpty(e.NewTextValue))
{
list.ItemsSource = notedata;
}
else
{
list.ItemsSource = notedata.Where(x => x.Name.StartsWith(e.NewTextValue));
}
}
}
Upvotes: 1