我該如何改進這個UI搜索選擇下拉語義

Question

我想使它能夠讓用戶移動標籤，用戶可以在標籤之間添加新標籤。

如果用戶在兩個標籤之間單擊以添加更多標籤，則會出現光標。

我能夠得到the first bit to work。

<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" 
    }); 
});