How do I reinitialize material chip tags input?


Topic: How do I reinitialize material chip tags input?

studioinsight asked 2 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>
                                </div>

which I initialize like this:

$('#ingredients').materialChip({
            placeholder: '+ingrediente',
            secondaryPlaceholder: 'Ingredienti'
        });

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


Piotr Obrebski staff answered 2 years ago

Hi studioinsight,

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

https://mdbootstrap.com/snippets/jquery/pjoter-2-0/769804

If you need additional help I am here for you.

Best Regards, Piotr


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


Piotr Obrebski staff answered 2 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:

https://mdbootstrap.com/snippets/jquery/pjoter-2-0/769804

If you need any help I am here for you.

Best Regards, Piotr


Thai N Pham answered 1 months ago

this trick would work.

$('#chips-autocomplete').replaceWith($('#chips-autocomplete').clone());


Marcin Luczak staff commented 1 months ago

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

Keep coding, Marcin


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.0
  • Device: W10
  • Browser: Chrome
  • OS: W10
  • Provided sample code: No
  • Provided link: No
Tags