Question

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

数据列表看起来像这样（并且是任意的，可以改为任何）：

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

我可以通过简单地在CSS类的末尾添加“男性”或“女性”类来实现这一点，如果我能弄清楚如何做到这一点。这里有很多关于样式的问题，但没有关于按类别划分样式数据的问题。（此外，很多答案都已过时 - 有人说使用formatItem，这是不推荐的。其他答案实际上是针对jQuery UI，这是不同的。我正在使用jQuery-Autocomplete。）< / p>

我已尝试使用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-Autocomplete - 如何按类别设计样式

1 个答案: