Topic: How do I reinitialize material chip tags input?

studioinsight free asked 4 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;


MDBootstrap staff answered 4 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


Thai N Pham free answered 2 years ago


this trick would work.

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


Marcin Luczak staff commented 2 years ago

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

Keep coding, Marcin


studioinsight free answered 4 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 4 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



Please insert min. 20 characters.

FREE CONSULTATION

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

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: Yes
  • Provided link: No
Tags