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.v24.2.dll
NuGet Package: DevExpress.Wpf.Core
Declaration
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
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.