gpt4 book ai didi

javascript - 如何更改我搜索的文本颜色?

转载 作者:行者123 更新时间:2023-11-30 19:34:18 25 4
gpt4 key购买 nike

我正在尝试提供搜索服务。如果我在输入框中键入 "v",我会从 ajax 获取一个列表并显示它。

我想改变匹配部分的颜色。如果列表项是 "solve",则 "v" 将为红色。

$('input[name="searchInput"]').on("propertychange change keyup paste input", function() {
var currentVal = $(this).val();
if (currentVal == oldVal) {
return;
}
oldVal = currentVal;

callHtml('@Url.Action("SearchInput", "Search")', {
search: currentVal
}, function(data) {
if (data) {
$("#searchResult").html(data);
}
})
})

我已经在 $("#searchResult").html(data); 下尝试了这段代码

$(".searchlist").replaceAll(currentVal, "<span>" + currentVal + "</span>");

但是没有用。

最佳答案

使用您在评论中提到的 HTML 结构,您可以使用 .find() :contains 目标 <a> currentVal 中的元素找到了。

然后我会使用 .split().join()将匹配项包装在 <span> 中(您也可以使用正则表达式 replace ,但它会因某些保留字符匹配而变得棘手)。

$("#searchResult")
.html(data)
.find(`a:contains(${currentVal})`)
.html((idx,old) => old
.split(currentVal)
.join(`<span class="highlighted">${currentVal}</span>`)
);

var oldVal;
$('input[name="searchInput"]').on("propertychange change keyup paste input", function() {
var currentVal = $(this).val();
if (currentVal == oldVal) {
return;
}
oldVal = currentVal;

//mock data
var data = `<ul>
<li><a>hello</a></li>
<li><a>world</a></li>
<li><a>hello world</a></li>
<li><a>foobar</a></li>
<li><a>boo</a></li>
<li><a>far</a></li>
</ul>`;

$("#searchResult")
.html(data)
.find(`a:contains(${currentVal})`)
.html((idx,old) => old
.split(currentVal)
.join(`<span class="highlighted">${currentVal}</span>`)
);

});
span.highlighted {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="searchInput" placeholder="Search text">

<div id="searchResult"></div>

(请记住,此示例不是有条件地隐藏/显示匹配结果,只是演示突出显示)

关于javascript - 如何更改我搜索的文本颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56105053/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com