How to start the Chips component of Materialize with default values?

Navigation
1

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

He can also edit this card, so you can edit the tags.

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

Andthat'swheretheproblemlives,Idonotknowwhythekeywordfieldstaysthatway,itdoesnotlookliketheothers.

HereiswhereIcreatethisfield:

<divclass="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 enter the tags that he has added to edit in the field 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 can be? Why does not it fill at the beginning of the field like the rest?

    
asked by anonymous 08.11.2018 / 12:29

1 answer

1

Initializing the field before entering the data

You are initializing the field with $('.chips').chips(); before entering the values, so 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><linkrel="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><divclass="chips"></div>
  

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

Booting with data

But the Materialize chip itself allows you to enter the initial field data, you do not need to reinvent the wheel, you just use the data field passed to the chips function: 

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><linkrel="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><divclass="chips chips-initial"></div>

Using the addChip

Another alternative is to use the addChip method 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><linkrel="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><divclass="chips"></div>
    
08.11.2018 / 12:43
Structure HTML to PDF Positioning elements on the screen