Semantic UI 2.1.6 select tag (multiple) with remote data

Semantic UI 2.1.6 select tag (multiple) with remote data

by Bob Marley

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.6/semantic.min.css">
<p>
After selecting a menu option, all menu options are removed (instead of filtering the selection). 
<br>
Also, the Values of the selected options are being displayed in the menu instead of the Name or Text.
</p>

<div class="ui form">
  <div class="field remote">
    <label style="color: red">`select` element (multiple) with remote data</label>
    <select class="ui search selection dropdown" multiple>
      <option value="">Select...</option>
    </select>
  </div>

<p>
This works as expected
</p>
<div class="field remote">
   <label>`div` element (multiple) with remote data</label>
    <div class="ui multiple search selection dropdown">
      <input type="hidden" required>
      <i class="dropdown icon"></i>
      <input type="text" class="search">
      <div class="default text">Select...</div>
    </div>
</div>

</div>

CSS

body {
    padding: 1em;
}

JavaScript

$(function() {
    
  $('.field.remote .ui.dropdown')
    .dropdown({
      apiSettings: {
        url: '//api.semantic-ui.com/tags/{query}',
        cache: false
      }
    });

  

});