How can I improve this UI Search Selection Dropdown Semantically

Question

I want to make it something where the user can move tags around and the user can add new tags in-between tags.

A cursor would appear if the user clicks between two tags for adding more tags.

I was able to get 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
});

However, I was not able to complete the rest.

I want exactly the same thing happening in image below.

Answer 1

Change your document ready to this.

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