如何从语义上改善此UI搜索选择下拉菜单

Question

我想使用户可以在其中移动标签，并且可以在标签之间添加新标签。

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

我能够开始工作 。

<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

准备将文档更改为此。

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