jQuery-Autocomplete - как стиль по категории

Question

jQuery-Autocomplete содержит стили для выделенного элемента, остальные элементы и группы элементов, но то, что я хотел бы сделать, это стиль вещей в соответствии с категорией. У меня есть список имен, которые могут быть как мужскими, так и женскими; Я хотел бы сделать фон розовым для женского и синего для мужчин.

Список данных выглядит следующим образом (и является произвольным и может измениться в любой другой):

{ value: username, data: { category: gender } } 

Я мог бы это сделать, просто добавив «мужской» или класс «женский» до конца CSS если я смогу понять, как это сделать. Здесь много вопросов о стиле, но не о стилизации данных по категориям. (Кроме того, многие из ответов являются outdated-- некоторые говорят, что использовать formatItem, который устарел. Другие ответы на самом деле для JQuery UI, который отличается. Я использую jQuery-Autocomplete.)

Я попытался с помощью параметр groupBy, но это не совсем то, что я ищу (и все равно не позволял мне цветовой код группы в любом случае).

Я ищу в перекрывая suggest метод, который содержит следующую строку:

html += '<div class="' + className + '" data-index="' + i + '">' + formatResult(suggestion, value) + '</div>'; 

Но если есть более простой (или лучше, собственно) способ сделать это, я предпочел бы сделать это.

Answer 1

был в состоянии управлять контейнер с помощью beforeRender и Перебор через предложения и контейнер:

... 
beforeRender: function (container) {   
    $(container.children()).each(function(index){ 
     $(this).addClass($('#autocomplete').autocomplete().suggestions[index].data.category); 
    }) 
    return container; 
}, 
... 

https://jsfiddle.net/uveqkokn/2/