我正在使用 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);
});
},
});
最佳答案
根据 custom data and display 判断示例,您需要利用 _renderItem
方法进行自动完成:
$("input").autocomplete({ ... }).data("autocomplete")
._renderItem = function(ul, item) {
var listItem = $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
if (item.personal) {
listItem.addClass("personal");
}
return listItem;
};
每次渲染项目时都会调用此方法,从而可以对项目进行检查并有条件地应用类(或执行更复杂的操作)。
这是一个工作示例(没有 AJAX,但概念是相同的):http://jsfiddle.net/andrewwhitaker/rMhVz/2/
关于jQuery UI 自动完成 : add a css class to specific items,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5052360/