Вопрос:

Получить данные из материализации css чипов

javascript jquery frameworks

5941 просмотра

4 ответа

32 Репутация автора

Мне нужно получить данные из чипов MaterializeCSS, но я не знаю, как.

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

Спасибо за помощь.

Автор: Zdeněk Kundrát Источник Размещён: 18.09.2016 09:32

Ответы (4)


8 плюса

101 Репутация автора

Решение

Итак, чтобы получить доступ к чипу данных, вам просто нужно сделать это:

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

«0» - это индекс ваших данных (0, 1, 2, 3, ...)

«tag» - это содержимое чипа, вы также можете получить идентификатор ваших данных с помощью «.id»

Автор: Jerem Размещён: 16.10.2016 02:05

1 плюс

11 Репутация автора

Для получения данных с чипов Materializecss используйте код ниже.

$('#button').click(function(){
     alert(JSON.stringify(M.Chips.getInstance($('.chips')).chipsData));
});
Автор: Garvit Patel Размещён: 15.07.2018 06:10

0 плюса

31 Репутация автора

Это отлично сработало для меня

<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>
Автор: Huntr Размещён: 31.08.2018 04:45

0 плюса

480 Репутация автора

Похоже, они изменили измененный метод, доступный в последней версии.

Документация предполагает, что у вас должна быть возможность доступа к значениям как свойствам объекта, но я потратил целый час, глядя, что никуда не попал.

Пока не произошло следующее

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

Во время события onChipAdd я смог получить доступ к событию. Внутри этого объекта был массив тегов.

Я знаю, что это не документированный способ, однако у клиента есть только так много времени, когда он выставит счет, и я должен идти дальше

Автор: PowerMan2015 Размещён: 12.06.2019 09:06
Вопросы из категории :
32x32