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

Question

我有一个标签输入，对于添加的每个标签，我有一个下拉框来指定该标签的一些评级。比如说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

塔格化有可以侦听的事件，例如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>

​