语义UI：如何在多个下拉菜单中使用自定义图标远程搜索？ [英] Semantic-UI: How to use custom icons in multiple dropdown remote search?

问题描述

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

基本上，这个，和这个。

取这个小提琴，例如：我想要的是修改下拉项目的方法（而不是选中的标签，而是下拉列表中的实际项目）。 SUI提供 onAdd 和 onLabelCreate 回调，但这些仅在已经选择项目时有用。

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

解决方案

div class =snippetdata-lang =jsdata-hide =falsedata-console =truedata-babel =false>

  $（'＃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）.pr epend（< 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 =sourcesSearchclass =ui multiple big fluid search selection dropdown> < input name =sourcestype =hidden/> < i class =dropdown icon>< / i> < div class =default text> Sources ...< / div> < div class =menu> < / div>< / div>  

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?

解决方案

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

这篇关于语义UI：如何在多个下拉菜单中使用自定义图标远程搜索？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！