Hi, I have a website that allows users to apply tags when registering information. I want to allow users to insert this tags only if they are valid and I believe that autocomplete is the best feature for me, because I have a lot of valid information inside a database.

I believe that combining this:

<div class="chips chips-placeholder"></div>

$('.chips-placeholder').material_chip({
    placeholder: 'Enter a tag',
    secondaryPlaceholder: '+Tag',
});

With https://mdbootstrap.com/components/inputs/#autocomplete will get me there. But I don't know how to combine them. Can you help me?

Should I create a normal autocomplete field and a placeholder only to insert the chips(tags)? If this is the way, how can I insert them? And how can I avoid users to type direct into chips and only inside the autocomplete field?