The proper way to use a Searchbar + ListView

[Paul]

What is the proper layout type to use when doing a searchbar?

In IOS, with a page that contains several controls, you would want the listview to appear only when you are typing into the searchbar.

I experimented with Grids, StackLayouts, etc.  Whatever space gets allocated in the layout for the listview is never collapsed when done searching & you hide the listview.   Work fine in Windows and Android.

What is the proper way to do this?

One of many unsuccessful attempts:

 

 <Grid RowDefinitions="Auto,Auto,Auto" Grid.Row="0">
 <Label Text="Employee:" FontSize="Small" WidthRequest="120" Grid.Row="0" />
 <SearchBar x:Name="EmployeeSearch"   Placeholder="Select Employee..." TextChanged="OnTextChangedEmployee" HorizontalOptions="Center" WidthRequest="120"  BackgroundColor="Red" HeightRequest="200" Grid.Row="1" />
 <telerik:RadListView x:Name="searchResultsEmployee"  ItemTapped="OnItemTappedEmployee" Grid.Row="2" BackgroundColor="Green" HeightRequest="200">
                        <telerik:RadListView.ItemTemplate>
         <DataTemplate>
             <telerik:ListViewTemplateCell>
                 <telerik:ListViewTemplateCell.View>
                     <Grid>
                         <Label Margin="10" Text="{Binding EmployeeName}" />
                     </Grid>
                 </telerik:ListViewTemplateCell.View>
             </telerik:ListViewTemplateCell>
         </DataTemplate>
     </telerik:RadListView.ItemTemplate>
 </telerik:RadListView>
 </Grid>

[Didi]

Hello Paul,

You can use many approaches, it is up to you which one to implement.

1. SearchBar and on TextChanged, you can pass the source to the ListView ItemsSource

2. Another option is using the Telerik MAUI AutoComplete and bind its FilteredItems to the ListView source:

    <Grid RowDefinitions="Auto,*">
        <telerik:RadAutoComplete x:Name="autoComplete"
                                 ItemsSource="{Binding Source}"
                                 TextSearchPath="Name"
                                 ShowSuggestionView="False">
        </telerik:RadAutoComplete>

        <telerik:RadListView x:Name="listView" 
                             Grid.Row="1"
                             ItemsSource="{Binding FilteredItems, Source={x:Reference autoComplete}}">
            <telerik:RadListView.ItemTemplate>
                <DataTemplate>
                    <telerik:ListViewTemplateCell>
                        <telerik:ListViewTemplateCell.View>
                            <Grid>
                                <Label Margin="10" Text="{Binding Name}" />
                            </Grid>
                        </telerik:ListViewTemplateCell.View>
                    </telerik:ListViewTemplateCell>
                </DataTemplate>
            </telerik:RadListView.ItemTemplate>
        </telerik:RadListView>
    </Grid>

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        this.BindingContext = new ClientsViewModel();
    }
}

public class ClientsViewModel
{
    public ClientsViewModel()
    {
        this.Source = new ObservableCollection<Client>()
        {
            new Client("Freda Curtis", "[e-mail]", "available.png"),
            new Client("Jeffery Francis", "[e-mail]", "away.png"),
            new Client("Eva Lawson", "[e-mail]", "available.png"),
            new Client("Emmett Santos", "[e-mail]", "busy.png"),
            new Client("Theresa Bryan", "[e-mail]", "available.png"),
            new Client("Jenny Fuller", "[e-mail]", "busy.png"),
            new Client("Terrell Norris", "[e-mail]", "away.png"),
            new Client("Eric Wheeler", "[e-mail]", "away.png"),
            new Client("Nida Carty", "[e-mail]", "away.png"),
            new Client("Niki Samaniego", "[e-mail]", "busy.png")
        };
    }

    public ObservableCollection<Client> Source { get; set; }
}

public class Client
{
    public Client() { }

    public Client(string name, string imageSource)
    {
        this.Name = name;
        this.ImageSource = imageSource;
    }

    public Client(string name, string email, string imageSource)
    {
        this.Name = name;
        this.Email = email;
        this.ImageSource = imageSource;
    }

    public string Name { get; set; }
    public string Email { get; set; }
    public string ImageSource { get; set; }
}

Same behavior happens when using the MAUI ListView control. The last searched results are kept in the ListView collection. Here is the test xaml. The model is the same. 

    <Grid RowDefinitions="Auto,*">
        <telerik:RadAutoComplete x:Name="autoComplete"
                                 ItemsSource="{Binding Source}"
                                 TextSearchPath="Name"
                                 ShowSuggestionView="False">
        </telerik:RadAutoComplete>

        <ListView x:Name="listView" 
                             Grid.Row="1"
                             ItemsSource="{Binding FilteredItems, Source={x:Reference autoComplete}}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            <Label Margin="10" Text="{Binding Name}" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </Grid>

You can try implement custom logic to clear the collection using a timer or add a check if there isn't a text in the input area (search bar or autocomplete, then clear the collection bound to the list control.

These are the options I can suggest. I hope they will be of help.

Regards,
Didi
Progress Telerik