jQuery用户界面自动完成：添加一个CSS类特定项目 [英] jQuery UI autocomplete: add a css class to specific items
问题描述
我使用jQuery的用户界面的自动完成构件，我通过获取的回调显示的项目作为参照。
我有一个用例在那里我需要present一些我从服务器获取比其他人略有不同，使用户了解有这些项目之间的差异的项目。在我的情况，有些项目是个人，有些是全球。
我想，让个人项目通过添加CSS类给他们，让他们有一个稍微不同的背景中脱颖而出。
这可能吗？我已经看到了一个插件的存在，让我把任意的HTML中的'项目'的参考文档中，但我觉得这是不理想的，当我真正需要做的是增加一个类（在某些情况下）。
我想我会落得这样的：
$（＃myElement）。自动完成（{
//定义回调格式结果
来源：功能（REQ，加）{
//传请求服务器
VAR的baseUrl ='/getItems.php
$ .getJSON（的baseUrl，REQ，功能（数据）{ //创建响应对象数组
变种建议= []; //过程响应
$。每个（数据，功能（我，VAL）{
VAR进入=新的对象（）;
如果（val.personal ==真）{
//莫名其妙地增加一些CSS类？
}
entry.id = val.id;
suggestions.push（输入）;
}）; //传递数组回调
加（建议）
}）;
}， }）;
在自定义数据和显示样，你需要挖掘到 _renderItem 为自动完成的方法：
$（输入）。自动完成（{...}）。数据（自动完成）
._renderItem =功能（UL，项目）{
VAR的listItem = $（＆LT;立GT;＆LT; /李＆gt;中）
。数据（item.autocomplete项）
.append（＆所述a取代;+ item.label +＆下; / A＆gt;中）
.appendTo（微升）; 如果（item.personal）{
listItem.addClass（个人）;
} 返回的listItem;
};
这方法被称为的每次项目呈现的，使得它可以做到在项目检查，并有条件地应用类（或做一些更复杂）。
下面是一个工作的例子（没有AJAX，但概念是相同的）：<一href=\"http://jsfiddle.net/andrewwhitaker/rMhVz/2/\">http://jsfiddle.net/andrewwhitaker/rMhVz/2/
I am using Jquery UI's autocomplete widget and I am fetching the items to display through a callback as described in the reference.
I have a use-case where I need to present some of the items that I retrieve from the server slightly differently than others, so that the user understands there is a difference between these items. In my case, some of the items are 'personal', and some are 'global'.
I would like to let the 'personal' items stand out by adding a CSS class to them so that they have a slightly different background.
Is this possible? I have seen in the reference documentation that an addon exists that allows me to put arbitrary HTML in the 'items', but I feel that is suboptimal when all I really need to do is add a class (in some cases).
I think i would end up with something like this:
$("#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);
});
},
});
Judging by the custom data and display sample, you'll need to tap into the _renderItem method for autocomplete:
$("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;
};
This method is called every time an item is rendered, making it possible to do checks on the item and conditionally apply a class (or do something more complicated).
Here's a working example (without AJAX, but the concept is the same): http://jsfiddle.net/andrewwhitaker/rMhVz/2/
这篇关于jQuery用户界面自动完成：添加一个CSS类特定项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
