How to start the Materialize Chips component with predefined values?

Question

I have a business card app, when the user registers a card has a tag field that are the key words of the card.

It can also edit that card, so it can edit the tags.

When he clicks edit, I put all the data of the card already in the fields and there it is like this:

And that’s where the problem lives, I don’t know why the keyword field looks like this, it doesn’t look like the other.

This is where I create this field:

<div class="row">
                    <div class="input-field col s12">
                        <i class="material-icons prefix">find_in_page</i> 
                        <div class="chips chips-placeholder palavras-chave" placeholder="Palavras Chave"></div>
                    </div>
                </div>

This is where I insert in the field the tags he added to edit if you want:

$(".chips").append(


`<div class="chip">
                                        ${results.rows.item(i).descricao}
                                        <i class="close material-icons">close</i>
                                    </div>`
                            );

Does anyone know what it might be? Because it doesn’t fill in at the beginning of the field like the others?

Answer 1

Initializing the field before entering the data

You are initiating the field with $('.chips').chips(); before entering the values, this way Materialize will not recognize the values you add later. See:

$('.chips').chips();

const itens = ['Item 1', 'Item 2', 'Item 3'];

for (let item of itens) {
  $(".chips").append(
    `<div class="chip">
       ${item}
       <i class="close material-icons">close</i>
     </div>`
  );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

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

Note that adding elements after initializing the field does not become functional. You cannot delete the added items by pressing X, as Materialize does not recognize the elements as field values.

Initializing with the data

But the very chip of Materialize allows you to inform the initial data of the field, you do not need to reinvent the wheel, just you use the field data function chips:

const itens = ['Item 1', 'Item 2', 'Item 3'];

$('.chips-initial').chips({
  data: itens.map(it => ({tag: it}))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

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

Using the function addChip

Another alternative is to use the method addChip of Materialize to add the elements:

$('.chips').chips();

const itens = ['Item 1', 'Item 2', 'Item 3'];

for (let item of itens) {
  $(".chips").chips('addChip', {tag: item});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

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