从 Materialise CSS 芯片获取数据答案

【问题标题】：Get data from Materialize CSS chips从 Materialise CSS 芯片获取数据
【发布时间】：2017-01-26 03:18:32
【问题描述】：

我需要从 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>

【问题讨论】：

对不起我的英语。
请描述您对代码的期望以及实际发生的情况。这段代码是否足以重现您的问题（检查我的建议编辑：sn-p 允许我们查看结果，但这只有在所有必要的代码都存在时才有意义）
Javascript写[object Object], [object Object], [object Object], ...他可能会写chip的内容，没有[object Object], ...

标签： javascript jquery frameworks

【解决方案1】：

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

文档建议您应该能够将值作为对象的属性来访问，但我花了一个小时寻找，但没有找到任何地方。

直到发生以下情况

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

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

我知道这不是记录在案的方式，但是在计费时客户只能接受这么多时间，我必须继续前进。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

因此，要访问数据芯片，您只需这样做：

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

'0' 是数据的索引 (0, 1, 2 , 3, ...)。

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

【讨论】：

【解决方案4】：

这对我很有效

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        var elems = document.querySelectorAll('.chips');
        var instances = M.Chips.init(elems, {
            placeholder: "Ajouter des Tags",
            secondaryPlaceholder: "+tag",
            onChipAdd: chips2Input,
            onChipDelete: chips2Input,
            Limit: 10,
            minLength: 1
        });

        function chips2Input(){
            var instance = M.Chips.getInstance(document.getElementById('chip1')), inpt = document.getElementById('myInputField');
            inpt.value =  null;
            for(var i=0; i<instance.chipsData.length; i++){
                if(inpt.value == null)
                    inpt.value = instance.chipsData[i].tag;
                else{
                    inpt.value += ','+instance.chipsData[i].tag; //csv
                }
            }
            console.log('new value: ', inpt.value);
        }
    });
</script>

【讨论】：

解释一下。例如，要点是什么？