Topic: Multiselect with autocomplete and search

Magnus priority asked 1 year ago


Expected behavior Using multiselect component to be able to fetch async filtered server data

Actual behavior I find no example. I find good documented example for input, however not for select.

Resources (screenshots, code snippets etc.) Something similar to this. However code will not work.

https://mdbootstrap.com/snippets/standard/magnus/5003169

Please advice.


Magnus priority answered 1 year ago


Thanks Grzegorz Bujański!

I have now published snippet.

https://mdbootstrap.com/snippets/standard/magnus/5003169

I can fill the select component with snippet you provided. However can't filter server data.

Is there a way, similar to input box, using Autocomplete? Or is there another way to fetch async filtered server data?


Mateusz Lazaru staff commented 1 year ago

I see you tried to init both autocomplete and select as one component. Unfortunately, they don't work like this. These components must be used separately.

I have to point out that, select does not have asyncFilter option. Of course, it's possible to fetch data from the server and then create Select instance using fetched data data, but it will support only client-side filtering.


Grzegorz Bujański staff answered 1 year ago


Unfortunately I am unable to open your snippet. You probably didn't click publish.

But I prepared a snippet for you that may help you: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/5010267#js-tab-view

In the snippet you will find a button that adds new options. All you have to do is make small changes to it - download data from the API and add it to the select in the same way as in the snippet



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.2.0
  • Device: PC
  • Browser: Crome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes