Search code examples
androidsearchxamarinmvxlistview

How To Adding Search Functionality to MvxListView - Xamarin Android


I have created list and bind that to my layout it works fine now I want to implement search functionality in MvxListView -Code -Models

public class Language
{
    public string Lang { get; set; }
}

In Language Service Class

public async Task GetAllLanguageList(Action<ObservableCollection<Language>> successAction, Action<Exception> errorAction)
    {
        ObservableCollection<Language> AllLanguageList = new ObservableCollection<Language>();
        AllLanguageList.Add(new Language { Lang = "Spanish"});
        AllLanguageList.Add(new Language { Lang = "Portuguese"});
        AllLanguageList.Add(new Language { Lang = "Manadarin"});
        AllLanguageList.Add(new Language { Lang = "English"});

        await System.Threading.Tasks.Task.Delay(TimeSpan.FromSeconds(0));
        successAction(AllLanguageList);
    }

In my View Model I have done all these thinks for binding

public ObservableCollection<Language> AllLanguageList { get; private set; }
AllLanguageList = new ObservableCollection<Language>();

All code works fine Now I want to implement Search

In My client Side

edit_text_search = FindViewById<EditText>(Resource.Id.edit_text_search);
edit_text_search.TextChanged += InputSearch_TextChanged;

private void InputSearch_TextChanged(object sender, Android.Text.TextChangedEventArgs e)
{
    //What should I write here?
}

Xaml code

<Mvx.MvxListView
    android:id="@+id/ListView2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffffff"
    android:divider="@null"
    android:dividerHeight="0dp"
    local:MvxBind="ItemsSource LanguageList"
    local:MvxItemTemplate="@layout/mainlist_template_all" />

Solution

  • A very simple solution would be:

    1. Instead of binding to AllLanguageList bind to a new FilteredLanguageList
    2. Whenever someone enters something in a search box or text field filter AllLanguageList and overwrite contents of FilteredLanguageList

    So very naive and primitively:

    private List<string> _filteredLanguageList;
    public List<string> FilteredLanguageList
    {
        get => _filteredLanguageList;
        set 
        {
            _filteredLanguageList = value;
            NotifyPropertyChanged();
        }
    }
    
    private string _searchQuery;
    public string SearchQuery
    {
        get => _searchQuery;
        set
        {
            _searchQuery = value;
            FilterLanguages(_searchQuery);
        }
    }
    

    In your XAML bind your ListView ItemsSource to FilteredLanguageList, and bind your Entry Text property to SearchQuery.

    Then implement your filtering of languages in FilterLanguages. Something like this could work, but you need to adjust to your liking:

    private void FilterLanguages(string query)
    {
        FilteredLanguageList = AllLanguageList.Where(l =>
            l.Lang.ToLowerInvariant()
                .Contains(
                    query.ToLowerInvariant()).ToList();
    }