允许用户在标签之间添加新标签

Question

我希望用户可以移动标签，用户可以在标签之间添加新标签。

如果用户在两个标签之间点击以添加更多标签，则会出现光标。

我做到了这一点 - ＆gt; See On Fiddle

<input type="button" id="setValues" value="Set Values" />
<input type="button" id="clearValues" value="Clear Values" />

<div class="ui fluid selection search dropdown multiple sortable">
  <input name="tags" type="hidden">

  <div class="default text">Select</div>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item" data-value="angular">Angular</div>
    <div class="item" data-value="css">CSS</div>
    <div class="item" data-value="design">Graphic Design</div>
    <div class="item" data-value="ember">Ember</div>
    <div class="item" data-value="html">HTML</div>
    <div class="item" data-value="ia">Information Architecture</div>
    <div class="item" data-value="javascript">Javascript</div>
    <div class="item" data-value="mech">Mechanical Engineering</div>
    <div class="item" data-value="meteor">Meteor</div>
    <div class="item" data-value="node">NodeJS</div>
    <div class="item" data-value="plumbing">Plumbing</div>
    <div class="item" data-value="python">Python</div>
    <div class="item" data-value="rails">Rails</div>
    <div class="item" data-value="react">React</div>
    <div class="item" data-value="repair">Kitchen Repair</div>
    <div class="item" data-value="ruby">Ruby</div>
    <div class="item" data-value="ui">UI Design</div>
    <div class="item" data-value="ux">User Experience</div>
  </div>
</div>

$(document).ready(function() {
    $('.ui.dropdown').dropdown({
        onChange: function (value, text, $selectedItem) {
            console.log(value);
        },
        forceSelection: false, 
        selectOnKeydown: false, 
        showOnFocus: false,
        on: "hover" 
    });
});

$('#clearValues').click(function() {
    $('.ui.dropdown').dropdown("clear");
});

$('#setValues').click(function() {
    $('.ui.dropdown').dropdown("set selected", [
        "angular", "css", "design", "ember", "html", "ia", "javascript",
        "mech", "meteor", "node", "plumbing", "python", "rails", "react",
        "repair", "ruby", "ui", "ux"
    ]);
});
$(".sortable").sortable({
    revert: true
});

然而，我无法完成剩下的工作。

我想要在下面的图片中发生完全相同的事情。

Answer 1

没有多少jQuery标记插件可以做到这一点，但是这里有两个：

https://goodies.pixabay.com/jquery/tag-editor/demo.html

http://dundalek.com/jquery-tagin/

在任何情况下，关于这个主题的另一个SO线程，但它的小提琴似乎不起作用： How to check if cursor is between specified tags