Question

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

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

但是，当我实际上要使用这些标签时，除了标签名称（例如ID）之外，我还需要一些其他数据，以便我可以使用{{1} }字段。我目前无法实现。

如果我这样做：

PATCH

我的自动填充字段显示不正确：

此外，id回调函数不会接收具有完整数据的芯片，而只会显示：

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

是否可以在实现过程中实现这一目标？

Answer 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。从芯片获取数据时，将具有标签属性和id属性。

PD：如果要通过图像预览显示自动完成功能，则需要设置自动完成数据对象，如下所示：

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

我希望我有所帮助：）

具有自定义数据的Materializecss自动完成芯片

1 个答案: