wpf-devexpress-dot-xpf-dot-editors-61105cd0.md
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.v25.2.dll
NuGet Package : DevExpress.Wpf.Core
[DXLicenseWpfEditors]
public class AutoSuggestEdit :
PopupBaseEdit
<DXLicenseWpfEditors>
Public Class AutoSuggestEdit
Inherits PopupBaseEdit
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
Use advanced search
<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();
}
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
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.
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();
}
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
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.
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.
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.
When the editor suggestions are represented by complex objects, use the following properties:
You can specify the ItemStringFormat property to define how to format suggestions’ display text.
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. |
Show 13 items
Object DispatcherObject DependencyObject Visual UIElement FrameworkElement Control BaseEdit TextEditBase TextEdit ButtonEdit PopupBaseEdit AutoSuggestEdit
See Also