title: Change dropdown menu items format using results from API - Semantic UI
body: <p>Currently setting up a dropdown which gathers results from an API. I have set it up as follows:</p>
  
  <pre><code>$("#my-dropdown").dropdown({
      minCharacters: 2,
      apiSettings: {
          cache: false,
          url: getCorrectUrl(),
          method: 'POST',
          onResponse: function(users) {
              var response = {
                  success: true,
                  results: []
              };
              $.each(users, function(index, item) {
                  response.results.push({
                      name: item.name,
                      value: item.id
                  });
              });
              return response;
          }
      }
  });
  </code></pre>
  
  <p>And it is returning the correct data, just not in the form that I want. I would like to <strong>format the menu items how I want</strong>.</p>
  
  <p>Specifically, what I'm currently getting is:</p>
  
  <p><a href="https://i.stack.imgur.com/iqSQP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iqSQP.png" alt="Simple format dropdown menu items"></a></p>
  
  <p>...but what I want is:</p>
  
  <p><a href="https://i.stack.imgur.com/nDZWq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nDZWq.png" alt="Custom formatted dropdown menu items"></a></p>
  
  <p>I have seen the answer to <a href="https://stackoverflow.com/questions/38798655/semantic-ui-how-to-use-custom-icons-in-multiple-dropdown-remote-search">this question</a>, which uses the <code>onShow</code> function to change the items into a custom form, but is manual manipulation of the DOM the only way to do it? Or is there a built in method to specify custom format menu items for use in a API-powered dropdown menu?</p>