Изменение выпадающего меню с использованием результатов API - Semantic UI

Question

В настоящее время создается выпадающий список, который собирает результаты API. Я поставил его следующим образом:

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

И это возвращает правильные данные, просто не в той форме, которую я хочу. Я хотел бы форматировать пункты меню, как я хочу.

В частности, то, что я в настоящее время получаю:

... но то, что я хочу это:

Я видел ответ на this question, который использует функцию onShow, чтобы изменить элементы в пользовательскую форму, но ручное манипулирование DOM - единственный способ сделать это? Или существует встроенный метод для указания элементов меню пользовательского формата для использования в выпадающем меню с поддержкой API?

Answer 1

Я делал это раньше, он включает определение настраиваемого типа шаблона для генерации HTML для результатов ответа.

я пошел бы в dropdown.js в вашем Semantic/components директории и найти:

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

вы найдете некоторые предопределенные шаблоны там, как JSON используется для получения результатов.

Я не редактировал код там, а я скопировал обычный шаблон результатов (templates.dropdown), подправил скопирована содержал JS, чтобы соответствовать моим результатам и создал свою собственную функцию из него в моем JS файла:

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

при вызове функции выше, вы добавить свой собственный шаблон для преобразования ответа на результаты HTML, чтобы использовать его только указать тип шаблона, который будет использоваться в настройках API:

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 я смотрю на свой код, и я не думал en приложить событие onResponse в apiSettings, не было необходимости.