Skip to content

Default AutoComplete component #63960

@WellingtonNico

Description

@WellingtonNico

Is there an existing issue for this?

  • I have searched the existing issues

Context

Hello guys.
I'm process to convert my django project to aspnet blazor, and I use auto completes a lot, but lots of libraries doe not work very well for me, I think it's not that easy to use with my classes and also I use a lot multi selects with async search.

In my case my django project uses select2.

So I made my own auto complete, two versions, async and static, with multi and single options, id like to show you some, and I'd like you consider to add it to your library, of course it needs some adjusts and can even be used with other css library than bootstrap so it could also be a separated library.

Some things to note:

  • It supports pagination for async search;
  • Works just fine inside modals;
  • It also works with validation classes depending on validation context just like normal inputs inside EditContext;
  • Opens above in case there is no space bellow, but oppen bellow if there is no space above;
  • It's debounce on search supports CancellationToken so no waste of resource;
  • It has render fragment for the options and selected options, so the developer can show wharever it wants inside the dropdown or when an item or more items are selected;
  • In the static versions, the options dont need to be actually static, it only means you need to have the options pre loaded somehow, and the search will be based on selected label, dropdown label or id;
  • The AutoCompleteOption record allows us to have acces to more data than just id and label, we can put anything there for example a class with image url to render custom dropdown option!;
  • The way it's written it can be easily be converted to json and stored in url to save state for example to use with list pages, if the user reloads the page we can grab the url parameter and convert back to a class, I already did it in another project and it worked fine, so for the async autocomplete the selected options are already there without any effort. It will only work if the TData can be parsed to json, and int most cases it can;
  • The most important, it is way more easy to use than any other auto complete components for blazor out there;

Cons:

  • It does not support arrow navigation yet, I actually don't know what is the best way to implement it;
    Multiple files becouse of multiple versions, but they are very similar;

Demo

You'll see my version of modal, much easier to use, almost like React version, supports click outside to close and press ESC to close also, but this is related to another library(I opened a discussion in blazor bootstrap, but no move);
In this video you'll be able to see some demo:
https://drive.google.com/file/d/18-nTNsw_jEpIBCbPc7z3tjWCJ3W-9LBb/view?usp=sharing

Update

Since I created it, I improved it a lot, it's now much cleaner, I can provide the source code for you.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area-blazorIncludes: Blazor, Razor Components

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions