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

Posted 2023-05-08

【中文标题】JQUERY UI自动完成，最后一个字改变颜色

【英文标题】：JQUERY UI Autocomplete, change color on the last word

【发布时间】：2021-06-13 19:17:09

【问题描述】：

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

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

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

编辑1： 这些是我的行：

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

【问题讨论】：

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

我已经更新了帖子

【参考方案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> 标记包装最后一个单词，以便我们可以轻松地设置文本样式。

参考资料：

https://www.w3schools.com/jsref/jsref_split.asp https://www.w3schools.com/jsref/jsref_pop.asp https://www.w3schools.com/jsref/jsref_join.asp