Tagify下拉列表和建议在JS中工作，但在jQuery中不起作用

Question

我使用Tagify允许用户指示或选择发布文章的标记。

除了输入标记之外，我还需要列出一些已经在数据库中的建议。目前我还没有使用Ajax，因为我正在做一些测试，看看它应该如何工作。尽管如此，同样的插件在JS中工作，但在jQuery中不起作用。用于打开下拉列表的代码片段在jQuery中不起作用。

我哪里出问题了？

JS

var tagify = new Tagify(document.getElementById('app-tag-input'), {whitelist: []});
tagify.on('input', onInput);

function onInput(e) {

   var value = e.detail.value;
   tagify.whitelist = null;
   tagify.loading(true).dropdown.hide(); 
   tagify.whitelist = [{id: 1, value: 'html'}, {id: 2, value: 'css'}];
   tagify.loading(false).dropdown.show(value);

}

jQuery

var tagify = $('input[name="tag"]').tagify({whitelist: []});

tagify.on('input', onInput);

function onInput(e, tagName) {

   var value = tagName.value;
   tagify.whitelist = null;
   tagify.data('tagify').loading(true).dropdown.hide();
   tagify.whitelist = [{id: 1, value: 'html'}, {id: 2, value: 'css'}];
   tagify.data('tagify').loading(false).dropdown.show(value);

}

<input type="text" name="tag" id="app-tag-input">

Answer 1

在jquery版本中，要访问需要使用的tagify属性：

tagify.data('tagify').

这也适用于tagify.whitelist =调用：

tagify.data('tagify').whitelist = 

这是jquery版本中缺少的。

更新小提琴：https://jsfiddle.net/xoap1knt/

更新的代码:不幸的是，代码片段无法在其中工作，因为它似乎使用localStorage是出于某种未知的原因。

$(function () {
  var tagify = $('input[name="tag"]').tagify({whitelist: []});
  tagify.on('input', onInput);
  function onInput(e, tagName) {
    var value = tagName.value;
    tagify.whitelist = null;
    tagify.data('tagify').loading(true).dropdown.hide();
    tagify.data('tagify').whitelist = [{id: 1, value: 'html'}, {id: 2, value: 'css'}];
    tagify.data('tagify').loading(false).dropdown.show(value);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tagify/4.16.4/jQuery.tagify.min.js'></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tagify/4.16.4/tagify.min.css" />
<form action="save.php">
  <fieldset>
    <input type="text" name="tag">
  </fieldset>
</form>