Question

请帮助我，我想从MaterializeCSS芯片中选择数据，但我不知道，如何。我想要值表单输入（类型：隐藏）包含来自芯片的id数据。

var my_data = {
  "0":"Apple",
  "1":"Microsoft",
  "2":"Google"
}

var myConvertedData = {};
$.each(my_data, function(index, value) {
  myConvertedData[value] = null;
});
$('.chips-autocomplete').material_chip({
  autocompleteData: myConvertedData
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>

<div class="row">
  <div class=" col s12">
  <form method="POST" action="#">
    <div class="chips chips-autocomplete" id="optionS"></div>
    <input class="browser-default" type="text" name="val_selected" placeholder="form hidden for get item selected #options">
    <button type="submit" class="btn btn-large" disabled>Save
    </button>
  </form>
  </div>
</div>

这是我的代码：Fiddle

Answer 1

PS： 我不再在这里使用JQuery，因为它不再是依赖项。

我也有类似的问题。这将替换隐藏输入的值，您可以使用phpform将数据发送到后端。您可以实现此原型：

JS：

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("Genre").value = null; //making sure value is nulled when the browser hits back button and gets back to this page.
    var elems = document.querySelectorAll('.chips');
    var chips_genre = M.Chips.init(elems, {
        autocompleteOptions: {
            data: {
                'Romance': null, //Your Pickers
                'Action': null,
                'Adventure': null,
                'Comedy': null,
                'Crime': null,
                'Drama': null,
                'Fantasy': null,
                'Historical': null,
                'Fiction': null,
                'Mystery': null,
                'Thriller': null,
                'Satire': null,
                'Science Fiction': null,
            },
            limit: 5,
            minLength: 1 //customise this value according to your requirement
        }
    });
    document.getElementById("add_btn").addEventListener("click", function(event){
        chips_genre.forEach(function(entry) {
            console.log(JSON.stringify(entry.chipsData));
            var dat = entry.chipsData;
            dat.forEach(function (tags){
                document.getElementById("Genre").value += tags.tag + ","; //using "," as delimiter for multiple tags
            });
            document.getElementById("Genre").value += null; //adding null to the end.
        });
    });
});

表格：

<div class="chips chips-genre input-field">
    <input class="white-text" id="Genre_field">
</div>
<input type="hidden" id="Genre" name="Genre_Field">
<button type="submit" id="add_btn" class="btn">ADD</button>

Answer 2

我不明白您对“ id data”的含义，但是我遇到了同样的问题，现在已经解决，并将自动完成芯片传递给POST方法（也可以使用GET方法）。

这是我的HTML表单（目标代码，表单很长）：

<div class="input-field col s12">
    <input type="text" name="shadow_alb_arts"  id="shadow_alb_arts" value="">
</div>
<div class="chips chips-arts chips-placeholder input-field col s12" id="par_alb_arts">
    <input type="text" id="album_artists" name="album_artists[]">
</div>

输入#shadow_alb_arts将包含我将通过POST传递的ID Artist（因为#album_artists被传递为空白），并且使用jQuery，我将用定界符将所有Artist ID合并。

此文本区域将被隐藏，因此最终用户将看不到代码中的输入内容，可以对其进行测试并查看结果。

这是jQuery代码：

$('.chips-arts').chips(
        {
            autocompleteOptions: {
                data: {
                    //<?php echo implode(",\n", $arts); ?>
                    // Your data, I'll use this string format: artist_id) Artist Name (start_year-end_year) from country_name
                },
                limit: Infinity,
                minLength: 1,
            },
            placeholder: 'Artist name',
            secondaryPlaceholder: '+ Artist',
            onChipAdd: function(e) {
                var final_ids = "";
                $( "#par_alb_arts > div.chip" ).each(function() {
                    var chip_selected = $(this).text();
                    var author = $.trim(chip_selected);
                    var id_author = " " + author.split(")")[0] + " ";
                    final_ids = final_ids + id_author;
                });
                $("#shadow_alb_arts").val(final_ids);
            }
        },
    );
});

要清楚：

onChipAdd: function(e)，当用户选择一个芯片自动完成的值（是onChipAdd而不是onChipSelect时，我们将输入，因为当用户选择一个值（或按Enter）时，将添加新的芯片）。

var final_ids = "";是存储所有选定ID艺术的最终字符串

{$( "#par_alb_arts > div.chip" ).each(function()，这是带有子级选择（父级>子级）的jQuery foreach，当发生onChipAdd时，将使用类chip创建新的div，在这种情况下，我将从芯片标签中获取文本并进行解析字符串（自动完成部分中的所有值都使用特定的模式，因为稍后我将阅读文本并正确获取ID）

$("#shadow_alb_arts").val(final_ids);重新编写（隐藏）带有艺术家ID的输入文本，当最终用户提交表单时，此文本输入将包含值。

从芯片实现自动完成功能中获取价值

2 个答案:

我也有类似的问题。这将替换隐藏输入的值，您可以使用phpform将数据发送到后端。您可以实现此原型：