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.v19.1.dll

Declaration

C#

public class AutoSuggestEdit :
    PopupBaseEdit

VB.NET

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

Xaml

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

<dxe:AutoSuggestEdit 
    QuerySubmitted="AutoSuggestEdit_QuerySubmitted">
</dxe:AutoSuggestEdit>
...

C#

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();
}

VB.NET

Private Sub AutoSuggestEdit_QuerySubmitted(ByVal sender As Object, ByVal e As DevExpress.Xpf.Editors.AutoSuggestEditQuerySubmittedEventArgs)
    (CType(sender, AutoSuggestEdit)).ItemsSource = If(String.IsNullOrEmpty(e.Text), Nothing, Customer.GetCustomers().Where(Function(x) Regex.IsMatch(x.City, Regex.Escape(e.Text), RegexOptions.IgnoreCase Or RegexOptions.IgnorePatternWhitespace)).Take(10).ToList())
End Sub

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.

C#

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(); 
}

VB.NET

Private Sub AutoSuggestEdit_OnQuerySubmitted(ByVal sender As Object, ByVal e As AutoSuggestEditQuerySubmittedEventArgs)
    (CType(sender, AutoSuggestEdit)).ItemsSource = 
        If(String.IsNullOrEmpty(e.Text), 
            Nothing, 
            Me.context.CountriesArray _
                .Where(Function(x) Regex.IsMatch(x, Regex.Escape(e.Text), 
                RegexOptions.IgnoreCase Or RegexOptions.IgnorePatternWhitespace)) _
            .Take(10).ToArray() _
        )
End Sub

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.

Xaml

<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

Tip

GitHub Examples:

• How to populate AutoSuggestEdit asynchronously
• How to use AutoSuggestEdit with InfiniteAsyncSource

Related GitHub Examples

The following code snippets (auto-collected from DevExpress Examples) contain references to the AutoSuggestEdit class.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

C#

How-to-populate-AutoSuggestEdit-asynchronously/CS/MainWindow.xaml#L16

<DockPanel>
    <dxe:AutoSuggestEdit
        x:Name="autoSuggestEdit"

How-to-use-AutoSuggestEdit-with-InfiniteAsyncSource/CS/MainWindow.xaml#L14

<dxe:AutoSuggestEdit x:Name="autoSuggestEdit"
                     MaxWidth="300"

Inheritance

Show 13 items

Object

DispatcherObject

DependencyObject

Visual

UIElement

FrameworkElement

Control

BaseEdit

TextEditBase

TextEdit

ButtonEdit

PopupBaseEdit

AutoSuggestEdit

Extension Methods

GetErrorOperationCommands(Position)

GetErrorOperationCommands(Int32)

GetErrorOperationCommands(Point)