Filtering

The RadAutoCompleteView control allows users to define custom filtering logic through the following property:

  • Filter (IAutoCompleteFilter): Defines the function that will be used to filter items.

The IAutoCompleteFilter interface contains a Filter (bool) function that is called by RadAutoCompleteView control in order to filter items. The Filter function provides the following properties:

  • item: The item to be checked.
  • searchText: The current text in the RadAutoCompleteView control.
  • completionMode: The current CompletionMode of RadAutoCompleteView.

The function returns true when the item is added into RadAutoCompleteView FilteredItems collection, otherwise it returns false and the item won't be added into RadAutoCompleteView FilteredItems collection.

The RadAutoCompleteView TextSearchPath property is required in custom filtering scenarios.

Example

Here is an example how the RadAutoCompleteView Custom Filtering works when searching in two properties:

First, create the needed business objects, for example type Person with the following properties:

public class Person
{
    public Person(string firstName, string lastName)
    {
        this.FirstName = firstName;
        this.LastName = lastName;
    }

    public string FirstName { get; set; }

    public string LastName { get; set; }
}

Then create a CustomFilterViewModel with a collection of Person objects:

public class CustomFilteringViewModel
{
    public CustomFilteringViewModel()
    {
        this.Source = new ObservableCollection<Person>()
        {
            new Person("Freda", "Curtis"),
            new Person("Jeffery", "Francis"),
            new Person("Eva", "Lawson"),
            new Person("Emmett", "Santos"),
            new Person("Theresa", "Bryan"),
            new Person("Terrell", "Norris"),
            new Person("Eric", "Wheeler"),
            new Person("Alfredo", "Thornton"),
            new Person("Roberto", "Romero"),
            new Person("Orlando", "Mathis"),
            new Person("Eduardo", "Thomas"),
            new Person("Harry", "Douglas"),
            new Person("Merry", "Lasker")
        };

        this.Filter = new CustomAutoCompleteViewFilter();
    }

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

    public CustomAutoCompleteViewFilter Filter { get; set; }
}

After, create a class for example CustomAutoCompleteViewFilter that implements the IAutoCompleteFilter interface:

public class CustomAutoCompleteViewFilter : IAutoCompleteFilter
{
    public bool Filter(object item, string searchText, CompletionMode completionMode)
    {
        Person person = (Person)item;
        string lowerFirstName = person.FirstName.ToLower();
        string lowerLastName = person.LastName.ToLower();
        string lowerSearchText = searchText.ToLower();
        return lowerFirstName.Contains(lowerSearchText) || lowerLastName.Contains(lowerSearchText);
    }
}

Finally, use the following snippet to declare a RadAutoCompleteView in XAML:

<telerikInput:RadAutoCompleteView x:Name="Ğ°utoCompleteView"
                                  Filter="{Binding Filter}"
                                  TextSearchPath="FirstName"
                                  ItemsSource="{Binding Source}"
                                  Watermark="Search here..."
                                  SuggestionViewHeight="300">
    <telerikInput:RadAutoCompleteView.SuggestionItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Orientation="Horizontal">
                    <Label Text="{Binding FirstName}"/>
                    <Label Text="{Binding LastName}"/>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </telerikInput:RadAutoCompleteView.SuggestionItemTemplate>
</telerikInput:RadAutoCompleteView>

Where the telerikInput namespace is the following:

xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"

Here is the result:

AutoCompleteView Filtering

A sample Custom Filtering example can be found in the AutoCompleteView/Features folder of the SDK Samples Browser application.

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy