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

梦想的初衷 提交于 2019-12-07 06:58:28

问题


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?


回答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>



回答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>


来源:https://stackoverflow.com/questions/38798655/semantic-ui-how-to-use-custom-icons-in-multiple-dropdown-remote-search

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!