Autocomplete and filtering in WPF Autocomplete (SfTextBoxExt)

The AutoComplete functionality provides several modes of suggestions while typing. The suggested text can be appended to the original text, or can be displayed in a drop-down list so that searched item can be chosen based on the filtering option set.

AutoComplete source

The SfTextBoxExt control can be populated with a predefined list of items bind to the AutoCompleteSource property. The data can be either a list of strings or a custom data.

<editors:SfTextBoxExt HorizontalAlignment="Center" 
                      VerticalAlignment="Center" 
                      Width="300"
                      Height="40"
                      SearchItemPath="Name"
                      AutoCompleteMode="Suggest"
                      AutoCompleteSource="{Binding Employees}" />

For further details, refer to Populating Autocomplete with Data.

AutoCompleteSource

Custom data

The SearchItemPath property specifies the property path, by which the filtering has to be done when a custom data is bound to the AutoCompleteSource property. This property defines the value to be displayed in the drop-down suggestion box.

<editors:SfTextBoxExt HorizontalAlignment="Center" 
                      VerticalAlignment="Center" 
                      Width="300"
                      Height="40"
                      SearchItemPath="Name"
                      AutoCompleteMode="Suggest"
                      AutoCompleteSource="{Binding Employees}" />
textBoxExt.SearchItemPath = "Name";

SearchItemPath

Customize using the ItemTemplate

By default the drop-down window lists the filtered items as a text based on the SearchItemPath property set for the data. The AutoCompleteItemTemplate property helps to decorate the filtered items with visual elements. The following code block explains how to add an image to the drop-down list items.

<editors:SfTextBoxExt HorizontalAlignment="Center" 
                      VerticalAlignment="Center" 
                      Width="400"
                      Height="40"
                      SearchItemPath="Name"
                      AutoCompleteMode="SuggestAppend"
                      AutoCompleteSource="{Binding Employees}" >
                      <editors:SfTextBoxExt.AutoCompleteItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Image Source="User.png" Margin="2" Stretch="Uniform" Width="12"/>
                                <TextBlock Text="{Binding Name}" Margin="5 2"/>
                            </StackPanel>
                        </DataTemplate>
                      </editors:SfTextBoxExt.AutoCompleteItemTemplate>
</editors:SfTextBoxExt>

ItemTemplate

Filtering options

The phenomenon of string comparison for filtering suggestions can be changed using the SuggestionMode property. The default filtering strategy is “StartsWith” and it is case-insensitive.

SuggestionMode Description
None The control returns the entire collection without filtering.
StartsWith Displays all matches that begins with the typed characters in the text field. This strategy is case-insensitive.
StartsWithCaseSensitive Displays all matches that begins with the typed characters in the text field. This strategy is case-sensitive.
StartsWithOrdinal The control returns all possible matches that begins with the typed text based on the OrdinalIgnoreCase.
StartsWithOrdinalCaseSensitive The control returns all possible matches that begins with the typed text based on the Ordinal, which is case-sensitive.
Contains Displays all matches that contains typed characters in the text field. This strategy is case-insensitive.
ContainsCaseSensitive The control returns all possible matches that contains the typed text, which is culture and case-sensitive.
ContainsOrdinal The control returns all possible matches that contains the typed text based on the OrdinalIgnoreCase.
ContainsOrdinalCaseSensitive The control returns all possible matches that contains the typed text based on the Ordinal, which is case-sensitive.
Equals Displays all words that completely matches the typed characters in the text field. This strategy is case-insensitive.
EqualsCaseSensitive Displays all words that completely matches the typed characters in the text field. This strategy is case-sensitive.
EqualsOrdinal The control returns all possible matches that equals the typed text based on the OrdinalIgnoreCase.
EqualsOrdinalCaseSensitive The control returns all possible matches that equals the typed text based on the Ordinal, which is case-sensitive.
Custom The control returns all possible matches based on the [Filter](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_Filter) property. Filter property is of type SuggestionPredicate. In the MyFilter method, filtration is done by checking whether the collection contains the typed text.
EndsWith Displays all matches that ends with the typed characters in the text field. This strategy is case-insensitive.
EndsWithCaseSensitive Displays all matches that ends with the typed characters in the text field. This strategy is case-sensitive.
EndsWithOrdinal The control returns all possible matches ending with the typed text based on the OrdinalIgnoreCase.
EndsWithOrdinalCaseSensitive The control returns all possible matches ending with the typed text based on the Ordinal, which is case-sensitive.
<editors:SfTextBoxExt HorizontalAlignment="Center" 
                      VerticalAlignment="Center" 
                      Width="400"
                      Height="40"
                      SearchItemPath="Name"
                      SuggestionMode="Contains"
                      AutoCompleteMode="Suggest"
                      AutoCompleteSource="{Binding Employees}"/>
textBoxExt.SuggestionMode = SuggestionMode.Contains;

Contains

Prefix characters constraint

Instead of displaying suggestion list on every character entry, matches can be filtered and displayed after a few character entries. This can be done using the MinimumPrefixCharacter property. By default the constraint is set for each character entry.

<editors:SfTextBoxExt HorizontalAlignment="Center" 
                      VerticalAlignment="Center" 
                      Width="300"
                      Height="40"
                      SearchItemPath="Name"
                      AutoCompleteMode="Suggest"
                      MinimumPrefixCharacters="2"
                      AutoCompleteSource="{Binding Employees}" />
textBoxExt.MinimumPrefixCharacters = 2;

Minimum Prefix Length

Working with case sensitivity

IgnoreCase option allows the control to filter the suggestions by ignoring the case. The default value is false.

<editors:SfTextBoxExt HorizontalAlignment="Center" 
                      VerticalAlignment="Center" 
                      Width="400"
                      Height="40"
                      SearchItemPath="Name"
                      IgnoreCase="True"
                      AutoCompleteMode="Suggest"
                      AutoCompleteSource="{Binding Employees}"/>
textBoxExt.IgnoreCase = true;

Ignore Case

Showing image in token and drop-down

To display image in token use the ImageMemberPath property.

NOTE

This feature is applicable only for MultiSelectMode with Token mode.

To display image for each drop-down item a custom template can be assigned to AutoCompleteItemTemplate support.

<editors:SfTextBoxExt HorizontalAlignment="Left"
                      AutoCompleteMode="Suggest"
                      SearchItemPath="Name"
                      ImageMemberPath="Image"
                      MultiSelectMode="Token" 
                      TokensWrapMode="None"
                      Height="40"
                      AutoCompleteSource="{Binding Employees}"
                      VerticalAlignment="Center"
                      Width="200">
            <editors:SfTextBoxExt.AutoCompleteItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Height="40">
                        <Image Source="{Binding Image}" Margin="2" Height="35" Stretch="Uniform" Width="35"/>
                        <StackPanel  Margin="2"
                                            Orientation="Vertical">
                            <TextBlock Text="{Binding Name}" Margin="4,2,4,0" FontSize="12" Foreground="Black"/>
                            <TextBlock Text="{Binding Email}" Margin="4,1,2,2" FontSize="10" Foreground="Gray"/>
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </editors:SfTextBoxExt.AutoCompleteItemTemplate>
</editors:SfTextBoxExt>

ImageMemberPath

NOTE

View sample in GitHub

Display a message when suggestions are empty

When the entered item is not in the suggestion list, AutoComplete displays a text indicating that there is no search results found. Th text to be displayed for this can be customized using the NoResultsFoundTemplate property.

<editors:SfTextBoxExt HorizontalAlignment="Center" 
                      VerticalAlignment="Center" 
                      Height="40"
                      Width="400"
                      SearchItemPath="Name"
                      AutoCompleteMode="Suggest"
                      AutoCompleteSource="{Binding Employees}">
            <editors:SfTextBoxExt.NoResultsFoundTemplate>
                <DataTemplate>
                    <Label Content="No Results Found" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </DataTemplate>
            </editors:SfTextBoxExt.NoResultsFoundTemplate>
</editors:SfTextBoxExt>

NoResultsFoundTemplate

NOTE

View sample in GitHub