基于 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 有 events，您可以收听，例如 add 事件，因此您可以知道刚刚添加了标签并采取行动。

请记住，标签可能会被编辑（通过双击），因此您可能想在之后再次要求评分或禁止编辑（请参阅settings）。

示例 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>