Semantic-UI: How to use custom icons in multiple dropdown remote search?

Question

I'm trying to create a searchable multiple dropdown with custom icons that fetches its data from a remote source.

Basically, a mix between this, this and this.

Take this fiddle for example: What I want to is a way to modify the dropdown items (not the labels when they are selected, but the actual items in the dropdown list). SUI provides onAdd and onLabelCreate callbacks but those are only useful when an item has already been selected.

Is there a callback that allows me to modify the generated menu items?

Answer 1

$('#sourcesSearch').dropdown({
  saveRemoteData: false,
	apiSettings: {
  	url: '//beta.json-generator.com/api/json/get/EJYceWRub',
    cache: false
  },
  onShow : function(){
  	$(this).children('.menu').children('.item').each(function(a, b){
    	var user_group_identifier = $(this).attr('data-value');
        if(user_group_identifier.indexOf('user') >= 0){
        	$(this).prepend("<i class='user icon'></i>");
        }else if(user_group_identifier.indexOf('group') >= 0){
        	$(this).prepend("<i class='users icon'></i>");
        }
    });
  }
})

body {
  padding: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/>
<div id="sourcesSearch" class="ui multiple big fluid search selection dropdown">
  <input name="sources" type="hidden" />
  <i class="dropdown icon"></i>
  <div class="default text">Sources...</div>
  <div class="menu">
  </div>
</div>

Answer 2

I know this question is a bit old, but since I was looking to do something similar and the answer provided have some issues, when you click on the arrow or inside the search box the icons disappears or duplicate, I found a workaround similar to the solution posted but I used the onResponse event instead of onShow, I hope this could be useful for someone else looking to do the same.

$('#sourcesSearch').dropdown({
  saveRemoteData: false,
  apiSettings: {
url: 'https://beta.json-generator.com/api/json/get/EJYceWRub',
cache: false,
onResponse: function(response) {
  // make some adjustments to response
  $.each(response.results, function(index, item) {
    if (item.value.indexOf('user') >= 0) {
      response.results[index].name = "<i class='user icon'></i>" + item.name;
    } else if (item.value.indexOf('group') >= 0) {
      response.results[index].name = "<i class='users icon'></i>" + item.name;
    }
  });
  //console.log(response);
  return response;
},
  },
})

body {
  padding: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/>
<div id="sourcesSearch" class="ui multiple fluid search selection dropdown">
  <input name="sources" type="hidden" />
  <i class="dropdown icon"></i>
  <div class="default text">Sources...</div>
  <div class="menu">
  </div>
</div>