WPF - AutoSuggest Editor (v19.1)

23 April 2019

The AutoSuggestEdit is an editor that displays a drop-down list with suggestions as the user types in the text box. At a glance, it looks similar to the ComboBoxEdit, but it has unique features to support the following use cases:

Dynamic Suggestions For Advanced Search Scenarios

The AutoSuggestEdit can display a dynamically populated list of suggestions and highlight the search text in each result item. The editor allows you to include only matching items, so it can be used to search huge data sources without any UI performance degradation.

Highlight Search Text

You fully control which items to display in the suggestion list, so it is easy to implement use cases where data is retrieved from custom search engines, fuzzy search implementations, remote web services or other sources.

Flexible Popup Control

You can use any control as the editor popup, e.g. a Data Grid or a Tree List.

Flexible Popup Control

Event Controlled

The AutoSuggestEdit is controlled by events:

  • The event QuerySubmitted fires when the end user changes the editor text. In the event handler, you need to retrieve the search text and use it to perform the search. Implementing the search logic is up to you, which provides the flexibility to utilize any search mechanism. You generate a result collection and assign it to the ItemsSource property of the editor.
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();
}
  • SuggestionChosen is the event that fires when the end user selects a suggestion from the editor popup. Handle this event to update the editor text when a new item is selected.

Please Tell Us What You Think

You can see the AutoSuggestEdit in action by following this link (you need an installation of DXperience v19.1 Beta with demos on your machine): AutoSuggestEdit Demo

As always, we welcome your feedback. Please feel free to leave a comment and let us know what you think of the new editor.

12 comment(s)
Jacek Kosiński

What about the same Feature for WinForm and xaf ?

23 April, 2019
PETE N

It would be great if DevExpress could offer a Fuzzy Search implementation along with the control that could be delegated to if needed.

Thanks.

23 April, 2019
Andrey Makhorin

Great!

What about WinForms?

Thanks

23 April, 2019
Dmitry Babich (DevExpress)

We plan to release this functionality for WinForms in version 19.2. See our Roadmap for details:

community.devexpress.com/.../winforms-controls-2019-roadmap.aspx

24 April, 2019
AnGa

I look forward to see it working in Winforms.

24 April, 2019
Andrew Tinkler

I think this will be very useful, thanks.  

24 April, 2019
Kiryl Y.

Winforms is must have

24 April, 2019
Noufal Aboobacker 1

Nice Control. If I want the query event to fire with a delay is there a way to achieve that?

24 April, 2019
Mark Bissett 1

Looks great. Like others have said, can't wait until this is available for WinForms.

24 April, 2019
Steve Sharkey

Cool

25 April, 2019
Joel Weiss - PC

Will it also support getting the data asynchronously?

async void AutoSuggestEdit_OnQuerySubmitted(object sender,   AutoSuggestEditQuerySubmittedEventArgs e) {

 ((AutoSuggestEdit) sender).ItemsSource = await GetData(e.Text);

}

29 April, 2019
Ivan (DevExpress Support)

@Joel

Yes, you can handle QuerySubmitted in this manner. We plan to publish a few examples on how to use AutoSuggestEdit, and one of them will use the same approach.

@Noufal

It will be possible to implement an asynchronous QuerySubmitted event handler (see the comment posted by Joel) and add a delay there. For example:

static async Task<SCIssuesDemo[]> GetItems(string text, CancellationToken token) {
    await Task.Delay(1000, token);
    return await Task.Run(() => {
        return GetIssueDataQueryable().Where(x => x.Subject.Contains(text)).Take(20).ToArray();
    }, token);
}

CancellationTokenSource source;
async void QuerySubmitted(object sender, AutoSuggestEditQuerySubmittedEventArgs e) {
    if (source != null)
        source.Cancel();
    source = new CancellationTokenSource();
    var token = source.Token;
    try {
        autoSuggestEdit.ItemsSource = await GetItems(e.Text, token);
    }
    catch (OperationCanceledException) { }
}

30 April, 2019

Please login or register to post comments.