How do I reinitialize material chip tags input?

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>
                                </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;

Add comment

MDBootstrap staff answered 5 years ago

0 0 Best answer

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

Add comment

Thai N Pham free answered 3 years ago

0 0 Best answer

this trick would work.

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

Marcin Luczak staff commented 3 years ago

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

Keep coding, Marcin

Add comment

studioinsight free answered 5 years ago

1 0 Best answer

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

Add comment

MDBootstrap staff answered 5 years ago

0 0 Best answer