How to Filter Radzen Autocomplete Dropdown (Blazor) to Contain Items Matching All Tokens?

Question

*** Resolved *** See below

I'm working on a Radzen application that uses an Autocomplete component. I'm looking for guidance on how to implement a feature where the dropdown should contain items that match all the tokens entered by the user.

Here's what I'm trying to achieve:

User Input: Users can input multiple filter criteria separated by a delimiter (e.g., comma).

Tokenization: The input text is tokenized based on the delimiter to extract individual filter criteria.

Dropdown Filter: The Autocomplete dropdown should display items that match all of the tokens entered by the user, not just any single token.

For example, if a user enters "apple, banana," I want the dropdown to suggest items that contain both "apple" and "banana."

I've reviewed the Radzen documentation, but I couldn't find specific guidance on how to implement this particular tokenized filtering behavior in the Autocomplete component.

--- Resolution

Title: Tokenized Search Implementation in Radzen Autocomplete Component (Self-Answered)

Question:

I've successfully implemented tokenized search functionality in a Radzen Autocomplete component, and I'd like to share the solution with the community.

Problem: I wanted to allow users to filter the Autocomplete dropdown based on multiple criteria entered with a delimiter. The specific functionality I've achieved is as follows:

User Input: Users can input multiple filter criteria separated by a delimiter (e.g., comma).

Tokenization: The input text is tokenized based on the delimiter to extract individual filter criteria.

Dropdown Filtering: The Autocomplete dropdown displays items that match all of the tokens entered by the user, not just any single token.

For example, if a user enters "apple, banana," the dropdown suggests items that contain both "apple" and "banana."

Solution: Here's the code I used in the LoadData event handler to accomplish this:

async Task FilterItems(LoadDataArgs args)
{
    // Assuming _articles is a List<T> populated at initialization
    string[] searchTokens = args.Filter
        .ToLower()
        .Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
    
    // Assuming _filteredArticles is the list to which the dropdown is bound
    _filteredArticles = await Task.Run(() =>
    {
        return _articles
            .Where(item => searchTokens.All(token => item.art_omschrijving.ToLower().Contains(token)))
            .ToList();
    });

    return;
}

This code works as intended and achieves the desired tokenized search behavior within the Radzen Autocomplete component. _articles is assumed to be a list populated at initialization, and _filteredArticles is the list to which the dropdown is bound. Art_Omschrijving (description) is the field in the original collection that is parsed for tokens

I hope this solution is helpful to others looking to implement similar functionality. If you have any questions or suggestions for improvement, please feel free to share them.

Technology Stack: C#, Blazor, Radzen Autocomplete Component.

---