我正在使用
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/