Autocomplete multiselect with pills


Topic: Autocomplete multiselect with pills

tommykjensen asked 5 years 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 5 years ago

Hi @tommykjensen,

Please visit page about tags and badges for more info.

Probably you need chips component.


tommykjensen commented 5 years 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 5 years 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 commented 5 years ago

Thank you Konrad :-)


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

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