Problem with SearchBar and a ListView

Question

Hi, I have a listview with this code: ...in this page i have an icon in the toolbar that navigate to a xaml searchpage with a Search Bar with this code:How can use this SearchBar to search inside the Listview and show the EmpName corresponding with the typed text inside SearchBar??I´m sorry, i´m a begineer and i don´t see how to achieve it.Thanks for your help.

Lakshmi Natarajan · Answer

Hi Luis,

Thank you for using Syncfusion products.

We have checked the reported query “How to search ListView from another page’ from our end. We would like to inform you that you can achieve your requirement by creating another ListView with FilteredSource binded to the ItemsSource in the SearchPage. Please refer the following code snippets to achieve your requirement,

Xaml: Define ListView in the SearchPage.

<ContentPage.Content>

<SearchBar x:Name="barraBusqueda"

TextChanged="BarraBusqueda_TextChanged"

BackgroundColor="Black"

TextColor="#7FFF00"

FontSize="20"

Placeholder="BUSCAR..."

Text="{Binding SearchedText, Mode=TwoWay}"

PlaceholderColor="Chartreuse"

HeightRequest="50">

</SearchBar>

<syncfusion:SfListView x:Name="listView">

<syncfusion:SfListView.ItemTemplate>

<local:TemplateViewCell/>

</DataTemplate>

</syncfusion:SfListView.ItemTemplate>

</syncfusion:SfListView>

</StackLayout>

</ContentPage.Content>

Code behind: In the TextChanged event, set the SfListView.ItemsSource with the filtered source.

public partial class SearchPage : ContentPage

{

SearchBar searchBar;

ObservableCollection<Contacts> FilteredSource { get; set; }

public SearchPage ()

{

InitializeComponent ();

}

private void BarraBusqueda_TextChanged(object sender, TextChangedEventArgs e)

{

searchBar = (sender as SearchBar);

FilteredSource = new ObservableCollection<Contacts>();

if (searchBar == null || searchBar.Text == "")

{

listView.ItemsSource = null;

return;

}

foreach (var item in viewModel.contactsinfo)

{

if (item.ContactName.ToLower().Contains(searchBar.Text.ToLower()))

FilteredSource.Add(item);

}

listView.ItemsSource = FilteredSource;

}

We have prepared sample and attached video for the same in the following links,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/154566-2009435334

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/154566Video-1259850903

Please check the sample and let us know if this helpful. If your requirement is other than this, then kindly revert us back with more details of your requirement which would be helpful for us to check on it and provide you the solution as soon as possible.

Regards,

Lakshmi Natarajan

Luis Gomez · Answer

Thank you for the answerI´m not able to make it work...Lets see if i can explain it better...I have an SQLite model with this code:using SQLite;namespace AppListo{ public class Employee { [PrimaryKey, AutoIncrement] public long EmpId { get; set; } [NotNull] public string EmpName { get; set; } public string Company { get; set; } public string Designation { get; set; } public string Department { get; set; } public bool Favorito { get; set; } public int Precio { get; set; } public string Qualification { get; set; } }}and i retrieve a data list from the database with:public List GetAllEmployees() { return dbConn.Query("Select * From [Employee]"); }...and i show the list in a content page with this xaml code: ...and this code behind:var vList = App.DAUtil.GetAllEmployees();lstData.ItemsSource = vList;...what i want to know is how to search inside SQLite database for EmpName using the SearchBar Sorry if i don´t explain very wellThanks in advance

Lakshmi Natarajan · Answer

Hi Luis, 
 
Thank you for the update. 
 
We have checked the reported query “How to filter SfListView items” from our end. We would like to inform you that you can achieve your requirement using Filter predicate of DataSource to filter the items. We have documented the same in our online document. Please refer the same from the following links, 
 
UG Link: https://help.syncfusion.com/xamarin/listview/filtering 
KB link: https://www.syncfusion.com/kb/11478/how-to-filter-xamarin-forms-listview-sflistview-using-mvvm 
 
Please let us know if you need further assistance. 
 
Regards, 
Lakshmi Natarajan

Luis Gomez · Answer

HiI´m so sorry, but i´m not able to adapt this guides you link me to my personal project...Could you be more precise, once you know how it works my SQLite database?Sorry, but i´m just a newbie and it´s so difficult to me to adapt your solution to my code...Thank you for your understanding.

Chandrasekar Sampathkumar · Answer

Hi Luis,

Thank you for the update.

We have prepared sample based on the code snippets provided. You can achieve your requirement by using SfListView.DataSource.Filter predicate to filter the EmpName from SearchBar. Please refer the following code snippet for more reference,

C#: Filter items in BarraBusqueda_TextChanged event based on text entered

private void BarraBusqueda_TextChanged(object sender, TextChangedEventArgs e)

{

lstData.DataSource.Filter = FilterContacts;

lstData.DataSource.RefreshFilter();

}

private bool FilterContacts(object obj)

{

if (barraBusqueda == null || barraBusqueda.Text == null)

return true;

var contacts = obj as Employee;

if (contacts.EmpName.ToLower().Contains(barraBusqueda.Text.ToLower()))

return true;

else

return false;

}

We have attached the tested sample for your reference and you can download the same using the following link,

Sample Link: SfListViewSample

Video: VideoSample

You can also refer our online documentation on Filtering in ListView for more reference using the following link,

UG Link: https://help.syncfusion.com/xamarin/listview/filtering

We observed that you have provided code snippets for Xamarin ListView instead of SfListView in the previous update. If you are using Xamarin ListView you can update ListView ItemsSource as text entered in SearchBar like in the following code snippet to achieve your requirement,

C#: Updating ListView ItemsSource based on text entered

List<Employee> vList = new List<Employee>();

public MainPage()

{

InitializeComponent();

vList = vm.GetAllEmployees();

lstData.ItemsSource = vList;

}

private void BarraBusqueda_TextChanged(object sender, TextChangedEventArgs e)

{

lstData.ItemsSource = vList.Where(w => w.EmpName.ToLower().Contains(barraBusqueda.Text.ToLower()));

}

Please refer the output using Xamarin ListView using the following link,

Video: VideoSample

Please let us know if you need further assistance.

Regards,

Chandrasekar Sampathkumar

Luis Gomez · Answer

Thank you so much!it works!I have to tell you...it makes me happy!Great JobBest Regards

Chandrasekar Sampathkumar · Answer

Hi Luis,  
Thanks for the update. 
We are glad that the reported issue have been resolved at your end. Please let us know if you need any further update. As always we are happy to help you out. 
Regards, 
Chandrasekar Sampathkumar