Semantic-UI: Wie benutze ich benutzerdefinierte Icons in mehreren Dropdown-Remote-Suchen?

Question

Ich versuche, ein durchsuchbares Dropdown-Menü mit benutzerdefinierten Symbolen zu erstellen, die die Daten von einer Remote-Quelle abrufen.

Grundsätzlich eine Mischung zwischen this, this und this.

Nehmen Sie this fiddle zum Beispiel: Was ich möchte, ist eine Möglichkeit, die Dropdown-Elemente (nicht die Etiketten, wenn sie ausgewählt sind, aber die tatsächlichen Elemente in der Dropdown-Liste) zu ändern. SUI bietet onAdd und onLabelCreate Rückrufe, aber diese sind nur nützlich, wenn ein Artikel bereits ausgewählt wurde.

Gibt es einen Rückruf, mit dem ich die generierten Menüpunkte ändern kann?

Answer 1

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

Ich weiß, diese Frage ist ein bisschen alt, aber da ich war auf der Suche haben einige Probleme zur Verfügung gestellt etwas ähnliches und die Antwort zu tun, wenn Sie auf den Pfeil oder in das Suchfeld Die Symbole verschwinden oder duplizieren, ich fand eine Workaround ähnlich der veröffentlichten Lösung, aber ich habe das onResponse-Ereignis anstelle von onShow verwendet, ich hoffe, dass dies für jemand anderen nützlich sein könnte, der dasselbe machen möchte.

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