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

Posted

技术标签:

【中文标题】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 的&lt;span&gt; 标记包装最后一个单词,以便我们可以轻松地设置文本样式。

参考资料:

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

【讨论】:

以上是关于JQUERY UI自动完成,最后一个字改变颜色的主要内容,如果未能解决你的问题,请参考以下文章

Jquery UI 自动完成。如何使用 innerHTML 在 div 中写入结果?

jquery UI 自动完成:我克隆的自动完成字段不起作用

jQuery-UI 自动完成不会显示在 jQuery-UI 对话框中

Jquery UI - 自动完成不是一个功能

Jquery ui自动完成错误不是一个功能

自动选择单一匹配jQuery UI自动完成组合框