SearchBar View With SearchContent In Xamarin.Forms Application

Introduction

SearchBar view control is the control that provides you the way to search from the list of contents.

It has the events 'SearchButtonPressed', 'TextChanged' for performing actions respectively.

You can give the list of items that are required to perform the search for the item based on conditions and suggestions you want.

This article will cover the following,

  1. SearchBar view.
  2. SearchBar events.
  3. ListView for generating the values and selection of values

Prerequisite

  1. Knowledge in c#.
  2. Basics of Xamarin.

Implementation

Open Visual studio and select new project,

Xamarin

Select project type and give project name,

Xamarin

Select template – Blank App and code sharing as PCL.

Xamarin

Set the target and platform version as below,

Xamarin

Set the below configurations,

Xamarin

Open MainPage.xaml from Portable project and modify the contents as below,

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              xmlns:local="clr-namespace:SearchDemo"  
  5.              x:Class="SearchDemo.MainPage" BackgroundColor="Cyan">  
  6.     <StackLayout Orientation="Vertical">  
  7.         <Label Text="Search Country" FontSize="30"></Label>  
  8.         <SearchBar x:Name="SearchContent" TextChanged="SearchContent_TextChanged"></SearchBar>  
  9.         <Grid>  
  10.             <ListView x:Name="CountryList" ItemTapped="CountryList_ItemTapped"></ListView>  
  11.         </Grid>  
  12.     </StackLayout>  
  13. </ContentPage>  

Open MainPage.xaml.cs and modify the contents as below,

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Collections.ObjectModel;  
  4. using System.Linq;  
  5. using System.Text;  
  6. using System.Threading.Tasks;  
  7. using Xamarin.Forms;  
  8.   
  9. namespace SearchDemo  
  10. {  
  11.     public partial class MainPage : ContentPage  
  12.     {  
  13.         List<string> country = new List<string>  
  14.         {  
  15.             "India",  
  16.             "pakistan",  
  17.             "Srilanka",  
  18.             "Bangladesh",  
  19.             "Afghanistan"  
  20.         };  
  21.         public MainPage()  
  22.         {  
  23.             InitializeComponent();  
  24.         }  
  25.   
  26.         private void SearchContent_TextChanged(object sender, TextChangedEventArgs e)  
  27.         {  
  28.             var keyword = SearchContent.Text;  
  29.             if (keyword.Length >= 1)  
  30.             {  
  31.                 var suggestion = country.Where(c => c.ToLower().Contains(keyword.ToLower()));  
  32.                 CountryList.ItemsSource = suggestion;  
  33.                 CountryList.IsVisible = true;  
  34.             }  
  35.             else  
  36.             {  
  37.                 CountryList.IsVisible = false;  
  38.             }  
  39.         }  
  40.   
  41.         private void CountryList_ItemTapped(object sender, ItemTappedEventArgs e)  
  42.         {  
  43.             if (e.Item as string == null)  
  44.             {  
  45.                 return;  
  46.             }  
  47.             else  
  48.             {  
  49.                 CountryList.ItemsSource = country.Where(c=> c.Equals(e.Item as string));  
  50.                 CountryList.IsVisible = true;  
  51.            SearchContent.Text = e.Item as string;  
  52.             }  
  53.              
  54.         }  
  55.     }  
  56. }  

Note

Create the new Project as I have attached only Portable project in this article.

Run the application,

Xamarin

Enter any keyword for getting the available suggestion.

Xamarin

Selecting any item will fill its containing value.

Xamarin

You can perform the suggestion on searchbutton click event ' SearchButtonPressed'.

See the same output in Android emulator.

Up Next
    Ebook Download
    View all
    Learn
    View all