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 的<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【讨论】:
以上是关于JQUERY UI自动完成,最后一个字改变颜色的主要内容,如果未能解决你的问题,请参考以下文章
Jquery UI 自动完成。如何使用 innerHTML 在 div 中写入结果?