从使用芯片实现自动完成中获得价值

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 数据”是什么意思，但我遇到了同样的问题，现在解决了，并使用 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，因为当用户选择一个值（或按回车键）将添加新芯片）。

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

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

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