How to Implement Tokenization in Radzen Autocomplete Dropdown?

Radzen.Blazor Components
1

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:

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

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

  3. 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. Can anyone provide insights or an example of how to achieve this?

Any help or pointers would be greatly appreciated. Thanks!

2

Hi @P806,

I don't think RadzenAutoComplete or any other component supports your requirements out of the box. You can check if the custom filtering example helps you:

<div class="rz-p-12 rz-text-align-center">
    <RadzenAutoComplete @bind-Value=@companyName Data=@customers TextProperty="CompanyName" LoadData=@OnLoadData Style="width: 13rem" />
    <RadzenText TextStyle="TextStyle.Body2">Start typing e.g. France
        @((MarkupString)(!string.IsNullOrEmpty(companyName) ? $", Value is: <strong>{companyName}</strong>" : ""))</RadzenText>
</div>

@code {
    string companyName;

    IEnumerable<Customer> customers;

    async Task OnLoadData(LoadDataArgs args)
    {
        customers = await Task.FromResult(dbContext.Customers
            .Where(c => c.CustomerID.Contains(args.Filter) || c.ContactName.Contains(args.Filter))
            .OrderBy(c => c.Country));
    }
}
1 Like
4

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.

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.