Question

我尝试使用自定义图标创建可搜索的多个下拉列表，从远程源获取数据。

基本上，this，this和this之间的混合。

以this fiddle为例：我想要的是一种修改下拉项目的方法（不是选中它们时的标签，而是下拉列表中的实际项目）。 SUI提供onAdd和onLabelCreate回调，但这些回调仅在已选择项目时才有用。

是否有回调允许我修改生成的菜单项？

Answer 1

＆＃13;

$('#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>");
        }
    });
  }
})

＆＃13;

body {
  padding: 1em;
}

＆＃13;

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

＆＃13;

Answer 2

我知道这个问题有点老了，但是因为我想做类似的事情并且提供的答案有一些问题，当你点击箭头或搜索框里面的图标消失或复制时，我找到了一个解决方法类似于发布的解决方案，但我使用了onResponse事件而不是onShow，我希望这对于那些希望做同样事情的其他人有用。

＆＃13;

$('#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;
},
  },
})

＆＃13;

body {
  padding: 1em;
}

＆＃13;

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

＆＃13;

Semantic-UI：如何在多个下拉远程搜索中使用自定义图标？

2 个答案: