Jquery 使用自定义数据实现ECSS自动完成芯片

我正在使用带有自动完成选项的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'
}

---

在物化ECSS中有可能实现这一点吗？

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

假设您正在使用自动完成数据对象

修改下一行：

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

完成了

我也有同样的问题，我就是这样解决的。我使用

的“数据标签id”属性来传递标签的id。当您从芯片中获取数据时，您将拥有tag属性和id属性

PD：如果要使用图像预览显示自动完成，则需要如下设置自动完成数据对象：

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

---

我希望我帮了忙：）

工作得很好。也许考虑重命名<代码> IMG<代码> >代码>图像< /代码>，以保持它与库一致。

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