从Materialize CSS芯片获取数据

Question

我需要从Materialize CSS chips获取数据，但我不知道如何获取。

​

$('.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>

​

Answer 1

因此，要访问数据的芯片，您只需执行以下操作：

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

'0‘是你的数据的索引(0，1，2，3，...)。

‘'tag’是芯片的内容。您还可以使用“.id”获取数据的id。

Answer 2

要从Materialize CSS芯片获取数据，请使用以下代码。

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

Answer 3

他们似乎改变了最新版本中可用的方法。

文档建议您应该能够将这些值作为对象的属性进行访问，但我花了一个小时来查找，但没有取得任何进展。

直到发生了以下情况

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

在onChipAdd事件期间，我能够访问该事件。在这个对象中是一个标记数组。

我知道这不是记录在案的方式，然而，客户只有这么多时间才能接受账单，我必须继续前进。