Get data from Materialize css chips

问题

I need get data from MaterializeCSS 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>

Thank you for help.

回答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 indexof your data (0, 1, 2 , 3, ...)

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

回答2:

To get data from Materializecss chips use below code.

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

回答3:

They appear to change 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 ive spent an hour looking not not got 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 isnt the documented way, however there is only so much time a client will accept when it comes billing and i must move on

回答4:

This worked great for me

<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>

来源：https://stackoverflow.com/questions/39556138/get-data-from-materialize-css-chips

标签

javascript

jquery

frameworks