AutoSuggestEdit Class

An editor that displays a drop-down list of suggestions as a user types in the text box.

Namespace: DevExpress.Xpf.Editors

Assembly: DevExpress.Xpf.Core.v20.2.dll

Declaration

public class AutoSuggestEdit :
    PopupBaseEdit
Public Class AutoSuggestEdit
    Inherits PopupBaseEdit

Remarks

The AutoSuggestEdit is an editor that displays a drop-down list of suggestions as the user types in the text box.

TIP

The AutoSuggestEdit class inherits its features from the PopupBaseEdit class.

Refer to the PopupBaseEdit class description for information on derived features and API.

The editor is useful in the following cases:

  • Re-build the suggestion list on-the-fly

    The AutoSuggestEdit can display a dynamically populated list of suggestions. You can enable the search text highlight. You can populate the item list with any items that you consider appropriate for the entered string. With the AutoSuggestEdit, you can search against large data sources without any UI performance degradation.

  • Use advanced search

    You can control which items to display in the suggestion list. The editor allows you to populate a list of suggestions via a custom search engine, fuzzy search, remote web service, etc.

Add an AutoSuggestEdit to a Project

<Window 
    xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"> 

<dxe:AutoSuggestEdit 
    QuerySubmitted="AutoSuggestEdit_QuerySubmitted">
</dxe:AutoSuggestEdit>
...
private void AutoSuggestEdit_QuerySubmitted(object sender, DevExpress.Xpf.Editors.AutoSuggestEditQuerySubmittedEventArgs e) {
    ((AutoSuggestEdit)sender).ItemsSource = string.IsNullOrEmpty(e.Text)
? null
: Customer.GetCustomers()
      .Where(x => Regex.IsMatch(x.City, Regex.Escape(e.Text), RegexOptions.IgnoreCase | RegexOptions.IgnorePatternWhitespace))
      .Take(10)
      .ToList();
}

Editor Value

The editor's value can be specified using the BaseEdit.EditValue property or the SetEditText(String) method.

To respond to changing the editor's value, handle the BaseEdit.EditValueChanged event. To check the new value's validity, handle the BaseEdit.Validate event.

Dynamically Loaded Suggestions

The editor fires the AutoSuggestEdit.QuerySubmitted event when an end user types in the editor's text box. In the event handler, you can:

  • get the entered text
  • use this text to search for relevant suggestions (using search engines, fuzzy search, etc.)
  • provide suggestions for the editor to display in its drop-down list. In this case, assign a collection of suggestions to the editor's AutoSuggestEdit.ItemsSource property.
void AutoSuggestEdit_OnQuerySubmitted(object sender, AutoSuggestEditQuerySubmittedEventArgs e) { 
    ((AutoSuggestEdit)sender).ItemsSource = string.IsNullOrEmpty(e.Text) 
        ? null 
        : this.context.CountriesArray 
              .Where(x => Regex.IsMatch(x, Regex.Escape(e.Text), RegexOptions.IgnoreCase | RegexOptions.IgnorePatternWhitespace)) 
              .Take(10) 
              .ToArray(); 
}

The editor's AutoSuggestEdit.SuggestionChoosing event occurs before the editor accepts the selected value and allows you to substitute a selected popup item with another object.

Custom Control in Editor Popup

Use the PopupBaseEdit.PopupContentTemplate property to define a custom control that displays suggestions in the AutoSuggestEdit's popup. The custom control's x:Name property should be set to "PART_Content".

If the PopupContentTemplate is not specified, the editor uses the DevExpress.Xpf.Editors.Popup.AutoSuggestListBox control to display a collection item list. AutoSuggestListBox is a System.Windows.Controls.ListBox descendant designed to be used in the AutoSuggestEdit's popup.

Customize Items

Appearance

You can change the AutoSuggestEdit items' appearance via WPF templates. Use the AutoSuggestEdit's AutoSuggestEdit.ItemTemplate property to specify the item template.

<dxe:AutoSuggestEdit 
    QuerySubmitted="AutoSuggestEdit_QuerySubmitted">
    <dxe:AutoSuggestEdit.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" >
                <TextBlock Text="City:" Width="30"/>
                <TextBlock Text="{Binding City}" Width="100"/>
                <TextBlock Text="Customer:" Width="60" HorizontalAlignment="Right"/>
                <TextBlock Text="{Binding Name}" Width="120"/>
            </StackPanel>
        </DataTemplate>
    </dxe:AutoSuggestEdit.ItemTemplate>
</dxe:AutoSuggestEdit>

You can apply different templates to an editor's drop-down items using custom logic implemented in the ItemTemplateSelector.

Content

When the editor suggestions are represented by complex objects, use the following properties:

  • DisplayMember - specifies a field name in the bound data source whose values are displayed in the editor popup.
  • TextMember - specifies a data field whose values are displayed in the editor's text box.

You can specify the ItemStringFormat property to define how to format suggestions' display text.

Item Highlight

Use the following API to highlight the search text in a list of suggestions.

Member Description
AllowPopupTextHighlighting Gets or sets whether the editor highlights the search results in its drop-down text according to the PopupHighlightedTextCriteria criteria.
PopupHighlightedTextCriteria Gets the filter condition (comparison operator) used to highlight the text in drop-down suggestions.
CustomPopupHighlightedText Occurs when an end-user types into the editor's text box and allows you to provide a custom text to highlight.

Examples

View Example: How to populate AutoSuggestEdit asynchronously

View Example: How to use AutoSuggestEdit with InfiniteAsyncSource

See Also