基于Tagify标签更改页面的html布局

Question

我有一个tagify输入，对于添加的每个标签，我都有一个下拉框来指定该标签的一些评级。说1-5。

<input id="generic-skills" class="tagify" tabindex="-1"/>

let genericSkillsInput = document.querySelector("#generic-skills");
let genericSkills = new Tagify(genericSkillsInput, {
whitelist: [],
maxTags: 10,            // <- maximum allowed selected tags
dropdown: {
maxItems: 10,       // <- maxumum allowed rendered suggestions
enabled: 0,         // <- show suggestions on focus
closeOnSelect: true // <- do not hide the suggestions dropdown once an item has been selected
}
});

然后，我想在这个列表下面有一个下拉框列表，每次添加/删除标记时都会对其进行修改。

<div id="generic-skills-dropdowns" class="offset-1 col-sm-4 pad-all">
<div class="form-group">
<label>tag name</label>
<select class="form-control kt-select2" id="kt_select2_2" name="param">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>

我知道我可以有一个这样的事件处理程序：

async function onGenericSkillsTagsChange(e) {
const {name, value} = e.target;
const dropdowns = $('#generic-skills-dropdowns');
const newDropdown =
"<div class='form-group'>n" +
"    <label>"+ name +"</label>n" +
"    <select class='form-control kt-select2' id='kt_select2_2' name='param'>n" +
"        <option>1</option>n" +
"        <option>2</option>n" +
"        <option>3</option>n" +
"    </select>n" +
"</div>";
dropdowns.append(newDropdown);
}
genericSkills.DOM.originalInput.addEventListener('change', onGenericSkillsTagsChange);

但这并没有指定是添加还是删除标签，只是给出了所有当前标签的列表。那么，我如何跟踪输入中的标签呢？

Answer 1

Tagify有一些事件可以监听，例如add事件，这样您就可以知道刚刚添加了一个标签并采取行动。

请记住，标记可能会被编辑(通过双击(，因此您可能希望在之后再次请求评级或禁止编辑(请参阅设置(。

示例1-建议内部评级

如果你强迫用户从白名单中选择标签，那么你可以做一些更酷的事情，那就是直接将评分放在建议项目中。您也只能允许在对建议进行评级后选择建议。

请仅在整页中查看以下内容(单击run后(：

var input = document.querySelector('input')
var tagify = new Tagify(input, {
addTagOnBlur: false,
enforceWhitelist: true,
dropdown: {
enabled: 0,
closeOnSelect: true
},
whitelist: ['aaa','aaaaaa','aaabbb', 'aaaccc', 'aaadd', 'aaaeee'],
templates : {
dropdownItem( item ){
var uid = `rate-${item.value.replace(/' '/g, '-')}`;
return `<div ${this.getAttributes(item)}
class='tagify__dropdown__item ${item.class ? item.class : ""}'
tabindex="0"
role="option">
${item.value}
<div class="rating" data-value="${item.value}">
<input type='radio' hidden name='${uid}' id='${uid}--5' value='5'>    
<label for='${uid}--5'></label>
<input type='radio' hidden name='${uid}' id='${uid}--4' value='4'>    
<label for='${uid}--4'></label>
<input type='radio' hidden name='${uid}' id='${uid}--3' value='3'>    
<label for='${uid}--3'></label>
<input type='radio' hidden name='${uid}' id='${uid}--2' value='2'>    
<label for='${uid}--2'></label>
<input type='radio' hidden name='${uid}' id='${uid}--1' value='1'>    
<label for='${uid}--1'></label>
</div>
</div>`
}
},
hooks: {
suggestionClick(e){
var isAction = e.target.closest('.rating'),
rating = e.target.previousElementSibling.value,
suggestionElm = e.target.closest('.tagify__dropdown__item'),
value = suggestionElm.getAttribute('value');
return new Promise(function(resolve, reject){
if( isAction && rating ){
rateItem(value, rating)
reject() // prevents selecting this suggestion
}
resolve()
})
}
}
})

function rateItem(value, rating){
// do something...
console.clear()
console.log('rated', value, rating, 'stars');   
}

.tagify__dropdown__item{
display: flex;
}
/* star rating - per suggestion */
.rating {
margin-left: auto;
font-size: 0;
position: relative;
margin-top: -2px;
color: silver;
}
.rating label {
display: inline-block;
float: right;
padding: 0;
font-size: 18px;
cursor: pointer;
}
.rating label::before {
content: "2606";
display: inline-block;
transition: .2s;
}
.rating label:hover::before, 
.rating label:hover ~ *::before {
color: orange;
opacity: .6;
}

.rating input:checked ~ label::before {
content: "2605";
color: orange;
}

<script src="https://unpkg.com/@yaireo/tagify"></script>
<link href="https://unpkg.com/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
<input>

示例2-添加或单击标签时的评级

var input = document.querySelector('input')
var tagify = new Tagify(input, {
addTagOnBlur: false,
editTags: false,
dropdown: {
enabled: 0,
},
whitelist: ['aaa','aaaaaa','aaabbb', 'aaaccc', 'aaadd', 'aaaeee']
})
tagify.on('add click', act)
// tagify.on('remove', onTagRemoved)
function act(e){
// show rating component now...
console.clear()
console.log(e.detail.data);   
}

<script src="https://unpkg.com/@yaireo/tagify"></script>
<link href="https://unpkg.com/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
<input>