Materializecss 带有自定义数据的自动完成芯片答案

【问题标题】：Materializecss Autocomplete chips with custom dataMaterializecss 带有自定义数据的自动完成芯片
【发布时间】：2018-10-27 08:26:48
【问题描述】：

我正在使用带有自动完成选项的 materializecss 芯片，并使用 ajax 设置自动完成数据。该文档显示使用以下语法设置基本标签：

$('.chips-autocomplete').chips({
    autocompleteOptions: {
      data: {
        'Apple': null,
        'Microsoft': null,
        'Google': null
      },
      limit: Infinity,
      minLength: 1
    }
  });

但是，当我真正想要使用这些标签时，我需要一些额外的数据，而不仅仅是标签的名称（例如 id），以便我可以使用 id 字段执行 PATCH 请求。我目前无法做到这一点。

如果我这样做：

autocompleteOptions: {
      data: {
        'golang': {
          tag: 'golang',
          id: 1
        },
        'docker': {
          tag: 'docker',
          id: 2
        },
        'kubernetes': {
          tag: 'kubernetes',
          id: 3
        }
      },
      minLength: 2
    },

我的自动完成字段未正确呈现：

另外，onChipAdd 回调函数不会接收到带有完整数据的芯片，只是看起来像：

{
  tag: 'golang'
}

在materializecss中可以实现吗？

【问题讨论】：

标签： jquery autocomplete materialize

【解决方案1】：

没有直接的方法。您需要修改库。自动完成回调总是被替换。

假设您正在使用 Materialize v1.0.0 和您的自动完成数据对象，

修改下一行：

6765 => 修改新对象的自动完成回调

this.options.onAutocomplete.call(this, text); //ORIGINAL
//Replace with this
this.options.onAutocomplete.call(this, {text: text, id: parseInt(el[0].dataset.tagId)});  //CUSTOM

6792 => 修改自动完成数据的条目对象

var entry = {
    data: data[key],
    key: key
};
//Replace with this
var entry = {
    data: data[key].img,
    key: data[key].tag, 
    id: data[key].id
};

6814 => 使用修改后的列表项呈现自动完成下拉菜单

var $autocompleteOption = $("<li></li>"); //ORIGINAL
//Replace with this
var $autocompleteOption = $("<li data-tag-id="+_entry.id+"></li>"); //CUSTOM

7890 => 设置芯片的自动完成回调

_this46.addChip({
    tag: val
});
//Replace with this
_this46.addChip({
    id: val.id,
    tag: val.text,
});

完成！

我遇到了同样的麻烦，这就是我解决它的方法。我使用<li> 的“data-tag-id”属性来传递我的标签的 ID。当你从芯片中获取数据时，你将拥有 tag 属性和 id 属性。

PD：如果你想通过图像预览显示自动完成，你需要像这样设置自动完成数据对象：

data:{ 'key':{tag:'key', img:'url/to/image.png', id: 2} }

希望对你有所帮助:)

【讨论】：

完美运行。也许考虑将img 重命名为image 以使其与库保持一致。