Ändern Sie das Dropdown-Menü Elemente Format mit Ergebnissen von API - Semantic UI

Question

Derzeit Einrichten eines Dropdown-Menüs, das Ergebnisse von einer API sammelt. Ich habe es wie folgt festgelegt:

$("#my-dropdown").dropdown({ 
    minCharacters: 2, 
    apiSettings: { 
     cache: false, 
     url: getCorrectUrl(), 
     method: 'POST', 
     onResponse: function(users) { 
      var response = { 
       success: true, 
       results: [] 
      }; 
      $.each(users, function(index, item) { 
       response.results.push({ 
        name: item.name, 
        value: item.id 
       }); 
      }); 
      return response; 
     } 
    } 
}); 

Und es ist die richtigen Daten zurückkehrt, nur nicht in der Form, die ich will. Ich möchte formatieren die Menüpunkte, wie ich will.

Insbesondere, was ich zur Zeit bin immer ist:

... aber was ich will, ist:

Ich habe die Antwort auf this question, gesehen die verwendet die onShow Funktion, um die Elemente in ein benutzerdefiniertes Formular zu ändern, aber ist manuelle Manipulation des DOM die einzige Möglichkeit, es zu tun? Oder gibt es eine integrierte Methode zum Angeben benutzerdefinierter Formatierungsmenüelemente zur Verwendung in einem Dropdownmenü mit API-Unterstützung?

Answer 1

Ich habe dies zuvor getan, es umfasst die Definition eines benutzerdefinierten Typs einer Vorlage zum Generieren der HTML für die Ergebnisse aus der Antwort.

möchte ich dropdown.js in Ihrem Semantic/components Verzeichnis gehen und finden:

$.fn.dropdown.settings.templates = { //line 3715 in version 2.2 

Sie einige vordefinierte Vorlagen dort finden, wie die JSON, die Ergebnisse zu generieren verwendet wird.

Ich habe den Code dort nicht bearbeiten, sondern kopiert ich die Vorlage üblichen Ergebnisse (templates.dropdown), gezwickt enthielt die kopierte js meine Ergebnisse passen und erstellt daraus meine eigene Funktion in meinem eigenen js-Datei:

function addDropdownTemplate(name){ 
    $.fn.dropdown.settings.templates[name] = function (response) {//use response 
    //use the edited version of the default template here  
} 
} 

Wenn Sie die oben genannten Funktion aufrufen, werden Sie Ihre eigene Vorlage zum Umwandeln der Antwort auf die HTML-Ergebnisse, fügen Sie es zu benutzen Sie einfach die Art der Vorlage angeben, die Sie in den api-Einstellungen verwenden:

apiSettings: { 
    //your other settings as in the question above 
    type: 'imageResult' //imageResult is an example, you can call it whatever 
    //you like as long as it's the same as what you passed 
    //to your function as the name parameter 
    } 

I schaue auf meinen Code und ich habe nicht ev en Attach ein onResponse Ereignis in der apiSettings, war nicht notwendig.