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

Question

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

基本上，介于 this 之间, this和 this .

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

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

Answer 1

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

$('#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>