jquery 中的颜色代码自动完成

Question

有什么方法可以更改 JQueries 自动完成中项目的颜色吗？我想要一个名册系统，它会以不同的颜色显示人们是否离开（当用户开始输入他们的名字时会显示）。

输入位置代码：

<input id="autocomplete_test">

带有脚本标签的代码（在 $(function{}) 下；在页面加载时加载）：

var autoItems = ['First Name','Second Name','Another Name','Last One'];
$("#autocomplete_test").autocomplete({ source: autoItems });

Answer 1

基于this jsfiddle，您需要稍微覆盖_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：

.personal { background-color: yellow; }

由于在呈现每个项目时都会调用此方法，因此您将能够有条件地应用 css class，然后根据需要设置样式。

编辑

评论：有什么方法可以将标签放入输入中，但将值保留在别处吗？

是的，在表单上添加一些字段（可能是hidden）（为了演示，这个没有隐藏）：

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

然后处理 autocomplete 上的 select 事件：

$("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;
};

可以在 jQueryUI 官方页面上找到更多信息：http://jqueryui.com/autocomplete/#custom-data

已更新 fiddle：http://jsfiddle.net/rMhVz/1326/

jquery 中的颜色代码自动完成

Color code autocomplete in jquery

javascript

jquery

colors

jquery-autocomplete

编辑