linked dynamic remote search dropdown

linked dynamic remote search dropdown

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.8/semantic.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.8/semantic.min.js"></script>
<form class="ui form segment">
  <div class="two fields">
    <div class="field">
    <label>Starts With</label>
      <div class="ui search selection dropdown first">
        <input name="first" type="hidden">
        <i class="dropdown icon"></i>
        <div class="default text">Starts With</div>
        <div class="menu">
          
       <div data-text="A" data-value="a" class="item">A</div>
       <div data-text="B" data-value="b" class="item">B</div>
       <div data-text="C" data-value="c" class="item">C</div>
       <div data-text="D" data-value="d" class="item">D</div>
       <div data-text="E" data-value="e" class="item">E</div>
       
        </div>
      </div>
    </div>
    <div class="field">
     <label>Animal</label>
      <div class="ui search selection dropdown second">
        <input name="second" type="hidden">
        <i class="dropdown icon"></i>
        <div class="default text">Animals</div>
        <div class="menu">
        </div>
      </div>
    </div>
  </div>
</form>

CSS

body {
  margin: 10px;
}

JavaScript

$.fn.dropdown.settings.forceSelection = false;

$('.ui.dropdown.second').dropdown({ 
  apiSettings: {
    url:  '//api.semantic-ui.com/tags/{letter}',
	beforeSend: function(settings) {
	  var val = $('.ui.dropdown.first').dropdown('get value');
	  console.log('value',val);
      settings.urlData.letter = val;
      return settings;
    }
  },
  filterRemoteData : true
});

$('.ui.dropdown.first').dropdown({
 onChange: function(value, text, $choice){	     
 $('.ui.dropdown.second').dropdown('clear');
 //2.2.8 bug doesn't clear search value 
 $('.ui.dropdown.second').find('.search').val('');
 }
});