如何在自动填充文本框选择值上使用CSS

Question

每次客户端从自动填充文本框中选择一个项目时，它会自动显示在我在文本框下创建的div中。 我想用div中出现的css 每个选中的项目进行样式，而不是整个div。例如，我希望每个选定的项目都显示为黑色边框。 （我可以很容易地在div上使用css，但是然后我会得到整个div的边框而不是每个选中的项目。）

那是JS代码。我需要的是将CSS添加到任何新的选定国家。

$(function() {
     /* Textbox ID */ $("#destinations").autocomplete({
        select: function (event, ui) {
           /* div ID */ $("#DestinationsChosen").html(function(i, origText)
            {
                var SelectedCountry = ui.item.value.toString();
                var CurrentText = origText.toString();
                if ((CurrentText.indexOf(SelectedCountry) >= 0))
                {
                    alert("Already Exists");
                    return CurrentText;
                }
                return CurrentText + " " + SelectedCountry;
            })
        }
    });
})

以下是整个代码：http://jsfiddle.net/3zfcb04k/

Answer 1

改变这个：

return CurrentText + " " + SelectedCountry;

到此：

return CurrentText + " <span>" + SelectedCountry + "</span><br/>";

然后在span标记上应用CSS。

Here is the updated JSFiddle

Answer 2

尝试将css放在class =＆＃34; ui-menu-item＆＃34;

.ui-menu-item{
  color:red;
}