BryanCass
BryanCass

Reputation: 373

Is there a control similar to HTML Datalist for .Net MAUI?

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

  1. I can prepopulate the field with existing data for that column from the db.
  2. It would show the filtered list as the user types in characters. Currently it opens up blank lines and doesn't show the data.
  3. It does NOT show all 1000+ entries in the List if the Search is blank unless the user is actually on that field. E.g. if you type in a search, then backspace and delete it and move to another field, all List entries remain displayed.

Screen shot of Notes field after typing 'a' - should be showing 3 suggested values from list

Upvotes: 1

Views: 467

Answers (1)

Alexandar May - MSFT
Alexandar May - MSFT

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

Related Questions