Autocomplete multiselect with pills

web
mobile

Topic: Autocomplete multiselect with pills

tommykjensen pro asked 2 weeks ago

I would like to create a multi select autocomplete component with pills getting data from http request.

Just like the "Add tags" box on this post question form. How do I do that? Do you have an example for that?

enter image description here


Konrad Stępień staff commented 2 weeks ago

Hi @tommykjensen,

Please visit page about tags and badges for more info.

Probably you need chips component.


tommykjensen pro commented 2 weeks ago

Done that. Yeah I can add the chip component and users can add a tag freetext. But I want the user to only be able to select a value coming from an autocomplete field.


Konrad Stępień staff answered 2 weeks ago

Hi @tommykjensen,

In mdb-auto-completer you should to use function like add chip for add your chip with value from autocoplete from output select, something like this: (select)="addChip($event) .

And here are different ways to add a chip.

You can add an item to the array. And then render your chips like this:

<div class="chip" *ngFor="let chip of chips">
  {{chip}}
  <mdb-icon fas icon="times" class="close" (click)="removeChip()"></mdb-icon>
</div>

Or render it directly in the DOM.

Best, Konrad.


tommykjensen pro commented 2 weeks ago

Thank you Konrad :-)


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 8.9.0
  • Device: pc
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No