Get data from Materialize CSS chips

Question

I need to get data from Materialize CSS chips, but I don't know, how.

$('.chips-placeholder').material_chip({
    placeholder: 'Stanici přidíte stisknutím klávesy enter',
    secondaryPlaceholder: '+Přidat',
});

function Show(){
    var data = $('.chips-placeholder').material_chip('data');
    document.write(data);
}

<!-- Added external styles and scripts -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- HTML body -->

<div class="chips chips-placeholder"></div>
<button onclick="Show()" type="button">Show</button>

Solution 1

So, to access to the data's chip you just have to do this:

var data = $('#id of your chips div').material_chip('data');
alert(data[0].tag);`

'0' is the index of your data (0, 1, 2 , 3, ...).

'tag' is the chip content. You can also get the id of your data with '.id'.

Solution 2

To get data from Materialize CSS chips, use the below code.

$('#button').click(function(){
    alert(JSON.stringify(M.Chips.getInstance($('.chips')).chipsData));
});

Solution 3

They appear to have changed the method available in the latest version.

The documentation suggests that you should be able to access the values as properties of the object, but I’ve spent an hour looking, not getting anywhere.

Until the following happened

 $('.chips-placeholder').chips({
        placeholder: 'Enter a tag',
        secondaryPlaceholder: '+Tag',
        onChipAdd: (event, chip) => {
            console.log(event[0].M_Chips.chipsData);
        },

During the onChipAdd event I was able to access the event. Within this object was an array of tags.

I know this isn't the documented way, however there is only so much time a client will accept when it comes billing and I must move on.

Comments

[Peter Mortensen]

An explanation would be in order. E.g., what is the gist?