jQuery-Autocomplete - 如何按類別設置樣式

Question

jQuery-Autocomplete爲高亮顯示的元素，其餘元素和元素組提供樣式，但我想要根據類別對事物進行樣式設置。我有一個可以是男性或女性的名單，我想讓背景爲粉色，男性爲藍色。

的數據列表看起來像這樣（並且是任意的，可以改變到什麼）：

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

我可以通過簡單地增加一個「男」或「女」類的CSS年底做到這一點如果我能弄清楚如何去做的話。這裏有很多關於風格的問題，但沒有關於按類別分類數據的問題。 （另外，許多答案已過時 - 有人說使用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/