jQuery-直观地将文本更改为标签

Question

现在在我的网站上，我可以写一个标签列表。这是通过只写文本并用逗号分隔文本来完成的。我对javascript不太了解，所以希望有人可以在这里为我提供帮助。

这是一个wordpress系统，因此我假设它会在有逗号的地方查看并在内部创建标签。或者像列表中的最后一个一样，如果没有任何内容，它将创建为标签。

我正在寻找一种将其视觉上更改为标签的方法。这不应该来自预定义的列表，而只是获取文本，并在出现逗号或用户按下Enter时在视觉上在其周围放置一个小方框。 我在视觉上说的原因是因为我不知道Wordpress是否会正确阅读它？

我在搜索时找到了此解决方案- http://xoxco.com/projects/code/tagsinput/example.html 我正在寻找类似于第一个解决方案的解决方案。一个称为默认值，但可能没有在文本框中已经放置的标签。

我已经使用现有的HTML创建了一个代码笔 https://codepen.io/mjthehunter/pen/YgRaBL

body, button, input, select, textarea {
  color: #484848;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.1rem;
  line-height: 1.5rem;
  font-weight: 400;
  font-style: normal;
}

input{
  padding: 0.8125rem;
  color: #484848;
  background: #fff;
  border: 2px solid #f5f5f5;
  border-radius: 0;
}

<div class="fes-el download_tag download_tag fn-type2-field">
  <div class="fes-label">
    <label for="download_tag">Tags<span class="fes-required-indicator">*</span></label>
  </div>
  <div class="fes-fields">
    <input class="textfield fes-required-field" id="download_tag" type="text" data-required="1" data-type="text" name="download_tag" value="" size="40" autocomplete="off" placeholder="hard surface, organic, tree, car">
    <script type="text/javascript">
    jQuery(function(){
      jQuery('#download_tag').suggest( fes_form.ajaxurl + '?action=fes_ajax_taxonomy_search&tax=download_tag', { delay: 500, minchars: 2, multiple: true, multipleSep: ', ' } );
    });
    </script>
  </div>
</div>

我的问题是，我无法更改HTML，但可以将jQuery添加到页面中。这可能吗？