尝试使用 tagify 插件用动态标签填充文本字段

Question

有以下代码（驻留在对话框中）并充当事件侦听器 用于复选框。能够使用复选框中的值填充/取消填充文本字段 通过选中或取消选中各个复选框：

// Event listener which picks individual contacts
// and populates input field.
$('#emailCheckListId_ul input:checkbox').change(function() {
      // Declare array
      var emails = [];

      // Iterate through each array and put email addresses into array
      $('#emailCheckListId_ul input:checkbox:checked').each(function() {
             emails.push($(this).val());
      });

      // Assign variable as To: text field by obtaining element's id.
      var textField = document.getElementById("root.emailTextField");

      // Add / Remove array from text field
      textField.value = emails;
});

但是，当我使用时尝试使用 JQuery Tagify< /a> 插件仅在文本字段内创建一个“标记动态标签”，但当我单击其他复选框时不会创建另一个标签。另外，当我取消选中原来的复选框时，它 不会删除原始标签。

这是我使用 JQuery tagify 插件的代码（我所做的就是保持所有内容与上面相同，但调用 tagify 函数 在文本字段上）：

// Add / Remove array from text field
textField.value = emails;

// Decorate with dynamic label
$(textField).tagify(emails); 

我在浏览器中收到此 JavaScript 错误：

jquery.tagify.js: 'options' is undefined, line 71

在源代码中，此行内容为：

_setOption: function( key, value ) {
    options.key = value;
},

它声明 options.key 未定义...

查看jquery.tagify.js完整源码请点击这里。

我可能做错了什么？有没有办法我可以创建一个“其他”，例如：

// Iterate through each array and put email addresses into array
$('#emailCheckListId_ul input:checkbox:checked').each(function() 
{
    // do something
}); 

// how would I define the else when the input:checkbox:checked is not checked:

// I already tried this but it doesn't work:
$('#emailCheckListId_ul input:checkbox:unchecked').each(function() 
{
    // do something else
});

如果有人可以帮助我，我将非常感激......

Answer 1

使用以下代码可以使其正常工作：

if (emails.length <= 0) {
    // Remove dynamic labels
    $(textField).tagify('destroy');

    // Empty text field
    textField.value = "";
}
else {
    // Reset tagify
    $(textField).tagify('destroy');

    // Add / Remove array from text field
    textField.value = emails;

    // Decorate with dynamic label
    $(textField).tagify(emails);
}