MarvinKlein1508 / BlazorInputTags

A simple to use blazor component for both Blazor Server and WebAssembly which adds a basic tag editor to your app.
MIT License
8 stars 0 forks source link

AutoComplete suggestions #2

Open gordon-matt opened 3 weeks ago

gordon-matt commented 3 weeks ago

Looks great. Can you add autocomplete suggestions? That would both speed up the input and moreover, prevent duplicate tags.

Of course I can handle the ValidateTag event like this:

var existingTags = ... //(from database)

private Task<bool> ValidateTagAsync(string tag)
{
    bool result = !existingTags.Any(x => x.Equals(tag, StringComparison.OrdinalIgnoreCase));
    return Task.FromResult(result);
}

..but this would still result in duplicates if there's a different spelling, for example (or a typo).

If we can pre-populate the component with the suggestions, that would be helpful. Example:

<InputTags Value="Tags" Suggestions="autoCompleteSuggestions" MinChars="3" />

@code {
    public List<string> Tags { get; set; } = new();
    private IEnumerable<string> autoCompleteSuggestions; // Populate from database
}

Where MinChars would be the minimum number of characters for the user to type before suggestions start showing

gordon-matt commented 3 weeks ago

Come to think of it, it would be better for the suggestions to be dynamic.. especially as new ones can be added at any time. So maybe this:

<InputTags Value="Tags" GetSuggestions="GetAutoCompleteSuggestionsAsync" MinChars="3" />

@code {
    public List<string> Tags { get; set; } = new();
    private async IEnumerable<string> GetAutoCompleteSuggestionsAsync(string userInput)
    {
        // Populate from database. Example:
            return await context.Tags.Where(x => x.Name.Contains(userInput)).ToListAsync();
    }
}
MarvinKlein1508 commented 3 weeks ago

Hi! Thanks for your suggestion!

The easy part is to get suggestions to the component. The harder part will be proper keyboard support.