Topic: How do I reinitialize material chip tags input?

studioinsight free asked 5 years ago

I have a simple tag input.

<div class="md-form">
                                    <div class="chips chips-placeholder mb-0" id="ingredients"></div>
                                    <small class="text-muted d-bloc mt-0">Massimo 15 ingredienti. Premi <strong>INVIO</strong> o <strong>, (virgola)</strong> dopo ogni ingrediente.</small>

which I initialize like this:

            placeholder: '+ingrediente',
            secondaryPlaceholder: 'Ingredienti'

But if I wanted to reinitialize it, using materialChip and passing data to it, things just don't work;

MDBootstrap staff answered 5 years ago

Hi studioinsight,

I eddited my snippet to add some chips "manualy" with jq after initialization.

If you need additional help I am here for you.

Best Regards, Piotr

Thai N Pham free answered 2 years ago

this trick would work.


Marcin Luczak staff commented 2 years ago

Thank you for contributing to our community, this is very helpful :)

Keep coding, Marcin

studioinsight free answered 5 years ago

Hi, this works, but what if I wanted to programmatically add/remove chips?

I need to do that because the chip tags input is placed in a modal, and whenever I close and reopen it the tags input must refresh and be assigned with new chips from an array. Calling materialChip() twice won't work

MDBootstrap staff answered 5 years ago

Hi! To initialize some chips just add "data" in initialization. I prepared simple snippet showing how you can add some default values for your case:

If you need any help I am here for you.

Best Regards, Piotr

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.0
  • Device: W10
  • Browser: Chrome
  • OS: W10
  • Provided sample code: Yes
  • Provided link: No