jQuery-自动完成 - 如何按类别设置样式

Question

jQuery-Autocomplete 为突出显示的元素、其余元素和元素组提供样式，但我想做的是根据类别设置样式。我有一个可以是男性或女性的名字列表；我想把女性的背景设为粉色，男性的背景设为蓝色。

数据列表如下所示（并且是任意的，可以更改为任何内容）：

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

我可以通过简单地在 CSS classes 的末尾添加一个 "male" 或 "female" class 来做到这一点，如果我能弄清楚的话怎么做。这里有很多关于样式的问题，但是 none 关于按类别设置数据样式的问题。（此外，很多答案都已过时——有些人说使用 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/

jQuery-自动完成 - 如何按类别设置样式

jQuery-Autocomplete - how to style by category

jquery

jquery-autocomplete