我正在使用
Jquery UI的自动完成小部件,并且我正在通过回调来获取要显示的项目,如参考文献中所述.
我有一个用例,我需要提供一些从服务器检索的项目与其他项目略有不同,以便用户了解这些项目之间的区别.在我的情况下,一些项目是“个人”,有些是“全球”.
我想通过向他们添加一个CSS类来让“个人”项目脱颖而出,使其具有稍微不同的背景.
这可能吗？我在参考文档中看到,存在一个插件,允许我将任意的HTML放在’items’中,但是当我真正需要做的是添加一个类(在某些情况下),我觉得这是不是最佳的.
我想我会结束这样的事情：
$("#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/
