Javascript jquery中的颜色代码自动完成

有没有办法更改jquerys autocomplete中项目的颜色？我想有一个花名册系统，将显示不同的颜色的人，如果他们不在（这将显示为用户开始键入他们的名字）

输入位置的代码：

<input id="autocomplete_test">

基于，您需要稍微覆盖一下renderItem：

$("input").autocomplete({
    source: data
}).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;
};

由于在呈现每个项目时都会调用此方法，因此您可以有条件地应用

css

class

，然后根据需要设置样式

编辑 注释：是否有某种方法可以将标签放入输入中，但将值保留在其他位置

是的，在表单上添加一些字段（可能是

隐藏的

）（此字段不是为了演示而隐藏的）：

更多信息可在jQueryUI官方页面上找到：

---

更新的fiddle:

发布您迄今为止所取得的成就。做一把小提琴会帮助其他人更好地理解它。我添加了我的代码。这太棒了，这就是我想要的。我注意到该示例在选中时将值（而不是标签）放入字段中。是否有某种方法可以将标签放入输入中，但将值保留在其他位置？这样我就可以记住提交表单时从数据库id中选择的名称（但用户只会在字段中看到名称）。这正是我想要的！我从没想过要用这样的选择活动。谢谢你。顺便说一句，我已经投了赞成票，但还没有代表它向公众展示。

$("input").autocomplete({
    source: data
}).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;
};

.personal { background-color: yellow; }

<input type='text' id='selected-value'/>

$("input").autocomplete({
    source: data,
    select: function( event, ui ) {
        $( "input" ).val( ui.item.label );
        $( "#selected-value" ).val( ui.item.value );

        return false;
      },
}).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;
};