AutoSuggestEdit
- 3 minutes to read
Overview
The AutoSuggestEdit is an editor that displays a drop-down list of suggestions as the user types in the text box.
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.
The AutoSuggestEdit control offers the following features.
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();
}
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. |
Standalone AutoSuggestEdit
To add a standalone AutoSuggestEdit to a Window, drag it from the Toolbox.
The following example demonstrates how to create an AutoSuggestEdit in markup.
<dxe:AutoSuggestEdit
QuerySubmitted="AutoSuggestEdit_QuerySubmitted">
</dxe:AutoSuggestEdit>
In-Place AutoSuggestEdit
Use the AutoSuggestEditSettings class to embed an AutoSuggestEdit in a container control.
The following example demonstrates how to embed an AutoSuggestEdit in a GridControl column.
<dxg:GridControl Name="grid">
<dxg:GridControl.Columns>
<dxg:GridColumn FieldName="City">
<dxg:GridColumn.EditSettings>
<dxe:AutoSuggestEditSettings/>
</dxg:GridColumn.EditSettings>
</dxg:GridColumn>
</dxg:GridControl.Columns>
</dxg:GridControl>