yairEO / tagify

🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue
https://yaireo.github.io/tagify/
Other
3.55k stars 436 forks source link

Selecting with properties other than value doesn't work #1287

Closed jjxtra closed 10 months ago

jjxtra commented 10 months ago

I can type in the text box and the dropdown appears and displays my name property. But when I click to select an item, nothing happens. How do I make it put the name property in the tag text box?

I tried using transformTag, but it's not called until I exit the text box. That's not what I want. I need it to put name in as the tag.

// my initialization code
var input = document.querySelector(sel);
var options =
{
  enforceWhitelist: true,
  whitelist: whitelist // array of objects [{ 'id':...,'name':...}]
};
options.dropdown =
{
  mapValueTo: 'name',
  searchKeys: ['name']
};
var tagify = new Tagify(input, options);
jjxtra commented 10 months ago

Ended up mapping my name property to value.

yairEO commented 10 months ago

You should always have a value property in the whitelist if the whitelist items are of type Object, but to actually see that text when the tag is selected, you aught to use the tagTextProp setting.