JQUERY UI 自动完成，更改最后一个字的颜色

Question

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

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

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

编辑1：这些是我的行：

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

Answer 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> 标签包裹最后一个词，这样我们就可以轻松地设置文本样式。

参考文献：

JQUERY UI 自动完成，更改最后一个字的颜色

JQUERY UI Autocomplete, change color on the last word

jquery

jquery-ui

colors

autocomplete