jQuery UI自动完成：将css类添加到特定项目

我正在使用Jquery UI的自动完成小部件，我正在通过回调中的描述获取要显示的项目。

我有一个用例，我需要提供一些我从服务器检索的项目与其他项目略有不同，以便用户理解这些项目之间存在差异。 就我而言，有些项目是“个人的”，有些是“全球性的”。

我想通过向他们添加一个CSS类来让“个人”项目脱颖而出，这样他们的背景就会略有不同。

这可能吗？ 我在参考文档中已经看到存在一个插件，允许我在“项目”中放置任意HTML，但我觉得当我真正需要做的是添加一个类（在某些情况下）时，这是次优的。

我想我最终会得到这样的东西：

$("#myElement").autocomplete({ //define callback to format results source: function(req, add){ //pass request to server var baseUrl = '/getItems.php' $.getJSON(baseUrl, req, function(data) { //create array for response objects var suggestions = []; //process response $.each(data, function(i, val){ var entry = new Object(); if (val.personal == true){ // add some css class somehow? } entry.id = val.id; suggestions.push(entry); }); //pass array to callback add(suggestions); }); }, }); 

Answer 1

根据自定义数据和显示示例判断，您需要使用_renderItem方法进行自动完成：

 $("input").autocomplete({ ... }).data("autocomplete") ._renderItem = function(ul, item) { var listItem = $("
") .data("item.autocomplete", item) .append("" + item.label + "") .appendTo(ul); if (item.personal) { listItem.addClass("personal"); } return listItem; }; 

每次渲染项目时都会调用此方法，从而可以对项目进行检查并有条件地应用类（或执行更复杂的操作）。

这是一个工作示例（没有AJAX，但概念是相同的）： http ： //jsfiddle.net/andrewwhitaker/rMhVz/2/

Answer 2

如果您使用的是JQuery UI 1.10及更高版本，则需要将代码更改为：ie“.data（” ui-autocomplete “）”

 $("input").autocomplete({ ... }).data("ui-autocomplete") ._renderItem = function(ul, item) { var listItem = $("
") .data("item.autocomplete", item) .append("" + item.label + "") .appendTo(ul); if (item.personal) { listItem.addClass("personal"); } return listItem; };