我有一个工作搜索过滤器,突出显示匹配的项目,因为文本输入。我遇到的问题是,当我清除文本输入时,列表中的所有项目都被分配了高亮类。
如果文本输入为空或只有空格,我需要做什么来删除所有突出显示类?
我现在的代码是基于我在这个网站上找到的东西。我不是一个js/jquery高手,我试图在文本输入为空时删除类,但没有成功。
<script>
const $input = $("#tagfilter");
const $items = $(".taglist");
function filterItems(text) {
text = text.trim().toLowerCase();
$items.each(function() {
const cont = $.trim($(this).text().toLowerCase());
const hasText = cont.includes(text);
$(this).toggleClass("fw-bold text-light bg-dark rounded p-1", hasText)
});
}
$input.on("input", function() {
filterItems($(this).val());
});
</script>
tagfilter是用于过滤的文本输入,.taglist被分配给列表中的每个项目。
这就是HTML的基本外观:
<input id="tagfilter" class="form-control" type="text" autocomplete="off">
<div class="taglist">item one</div>
<div class="taglist">item two</div>
<div class="taglist">item three</div>
2条答案
按热度按时间6vl6ewon1#
由于我们不知道您的所有类实际上都做了什么,因此我创建了一组简化的类来回答这个问题。
默认情况下,我隐藏标签列表,然后切换一个显示列表的活动类。
我的答案是用if语句包围each,以检查文本是否为空。如果为空,则删除活动类。
093gszye2#
使用上面的答案,我可以做我想要的: