mockResponse test

mockResponse test

by Bob Marley

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script>
<div class="ui form">
  <div class="two fields">
    <div class="field">
      <label>Favorite Animal</label>
      <div class="ui search selection dropdown">
        <input type="hidden">
        <i class="dropdown icon"></i>
        <input type="text" class="search" tabindex="0">
        <div class="default text">Select one...</div>
        <div class="menu" tabindex="-1"></div>
      </div>
    </div>
    <div class="field">
      <label>Favorite Animals</label>
      <div class="ui multiple search selection dropdown">
        <input type="hidden">
        <i class="dropdown icon"></i>
        <input type="text" class="search" tabindex="0"><span class="sizer"></span>
        <div class="default text">Select...</div>
        <div class="menu" tabindex="-1"></div>
      </div>
    </div>
  </div>
</div>

CSS

body {
  margin: 10px;
}

JavaScript

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

$('.ui.dropdown').dropdown({
  apiSettings: {
  
  loadingDuration: 10000,
     cache : 'local',
     method : 'post',
     url: '//api.semantic-ui.com/tags/{query}',
     mockResponse : function(d) {
        console.log(response,d);
     
        var response = {"success":true,"results":[{"name":"Fin Whale","value":"fin-whale"},{"name":"Forest Elephant","value"
:"forest-elephant"},{"name":"Falcon","value":"falcon"},{"name":"Ferret","value":"ferret"},{"name":"Finch"
,"value":"finch"},{"name":"Fish","value":"fish"},{"name":"Flamingo","value":"flamingo"},{"name":"Fly","value":"fly"},{"name":"Fox","value":"fox"},{"name":"Frog","value":"frog"},{"name":"African Elephant","value":"african-elephant"},{"name":"African Wild Dog","value":"african-wild dog"},{"name":"Albacore Tuna","value":"albacore-tuna"},{"name":"Amazon River Dolphin","value":"amazon-river dolphin"},{"name":"Amur Leopard","value":"amur-leopard"},{"name":"Amur Tiger","value":"amur-tiger"},{"name":"Arctic Fox","value":"arctic-fox"},{"name":"Arctic Wolf","value":"arctic-wolf"},{"name":"Asian Elephant","value":"asian-elephant"},{"name":"Aardvark","value":"aardvark"},{"name":"Albatross","value":"albatross"},{"name":"Alligator","value":"alligator"},{"name":"Alpaca","value":"alpaca"},{"name":"Ant","value":"ant"},{"name":"Anteater","value":"anteater"},{"name":"Antelope","value":"antelope"},{"name":"Ape","value":"ape"},{"name":"Armadillo","value":"armadillo"},{"name":"Ass/Donkey","value":"ass/donkey"},{"name":"African Buffalo","value":"african-buffalo"}]};
        
        return response;
      },
      
     beforeSend: function(settings) {
     settings.urlData.word = 'Al';

      return settings;
    }
    
  },
  filterRemoteData: true
});