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'/>

然后在select处理autocomplete事件：

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

更新了小提琴：http://jsfiddle.net/rMhVz/1326/

jquery中的颜色代码自动完成

1 个答案:

修改