Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Better auto complete #1173

WellingtonNico started this conversation in Show and tell
Discussion options

Hello guys.
I'm process to convert my django project to aspnet blazor, and I use auto completes a lot, but yours does 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 ;
  • Open 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 writter it can be easily be converted to json and store 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, because for the async autocomplete the selected options are already there without any effort. It will only work if the TData can be parsed, and int most cases it can;

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;

Bonus:

  • 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;

In this video you'll be able to see some demo:
https://drive.google.com/file/d/18-nTNsw_jEpIBCbPc7z3tjWCJ3W-9LBb/view?usp=sharing

You must be logged in to vote

Replies: 0 comments

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
1 participant

AltStyle によって変換されたページ (->オリジナル) /