JQUERY UI自动完成，最后一个字改变颜色答案

【问题标题】：JQUERY UI Autocomplete, change color on the last wordJQUERY UI自动完成，最后一个字改变颜色
【发布时间】：2021-06-13 19:17:09
【问题描述】：

我只想更改每行最后一个单词的文本颜色。我使用 Jquery UI 的自动完成功能，所以我使用 li 元素和类 'ui-menu-item'

 $('#tag' + i).autocomplete({
      source: allMyProducts
 });

我不明白该怎么做，有人可以帮我吗？

编辑1：这些是我的行：

例如一行是：“这是一个测试”，我想像这样改变颜色 “这是一个测试”（测试为红色）

【问题讨论】：

它不是很清楚，你能否展示你的示例代码 js 和 html 并准确地说 我对每一行的最后一句话是什么意思。
我已经更新了帖子

标签： jquery jquery-ui colors autocomplete

【解决方案1】：

考虑下面的代码。

$(function() {
  var availableTags = [
    "Catalizzatore Aqua-Pur-Haerter 82220 MDIVECA000467",
    "Catalizzatore CATAL. X MDIVECA000782",
    "Fondo acqua AQUATECH FONDO TIX HBS9A04",
    "Fondo acqua AQUATECH FONDO TIX HQ TT9/90 MDIVEFH000402"
  ];
  $("#tags").autocomplete({
    source: availableTags
  }).autocomplete("instance")._renderItem = function(ul, item) {
    var words = item.label.split(" ");
    var last = words.pop();
    return $("<li>")
      .append("<div>" + words.join(" ") + " <span class='red'>" + last + "<span></div>")
      .appendTo(ul);
  };
});

.red {
  color: red;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

这是从以下示例创建的：https://jqueryui.com/autocomplete/#custom-data

拆分句子的一种快速方法是将字符串转换为数组。因此，我们可以通过使用" " 将句子拆分为单词。然后我们可以弹出最后一个单词并将其余单词重新组合成一个句子。我用带有 Class 的<span> 标记包装最后一个单词，以便我们可以轻松地设置文本样式。

参考资料：

【讨论】：