jquery 当文本输入为空时,如何在搜索过滤器时删除基于类型的类?

up9lanfz  于 2023-06-05  发布在  jQuery
关注(0)|答案(2)|浏览(302)

我有一个工作搜索过滤器,突出显示匹配的项目,因为文本输入。我遇到的问题是,当我清除文本输入时,列表中的所有项目都被分配了高亮类。
如果文本输入为空或只有空格,我需要做什么来删除所有突出显示类?
我现在的代码是基于我在这个网站上找到的东西。我不是一个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>
6vl6ewon

6vl6ewon1#

由于我们不知道您的所有类实际上都做了什么,因此我创建了一组简化的类来回答这个问题。
默认情况下,我隐藏标签列表,然后切换一个显示列表的活动类。
我的答案是用if语句包围each,以检查文本是否为空。如果为空,则删除活动类。

const $input = $("#tagfilter");
const $items = $(".taglist");

function filterItems(text) {
  text = text.trim().toLowerCase();

  if(text != ""){
    $items.each(function() {
      const cont = $.trim($(this).text().toLowerCase());
      const hasText = cont.includes(text);
      $(this).toggleClass("active", hasText)
    });
   }
   else{
    $(".taglist.active").removeClass("active")
   }
}

$input.on("input", function() {
  filterItems($(this).val());
});
.taglist{display:none}
.taglist.active{display:block}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
093gszye

093gszye2#

使用上面的答案,我可以做我想要的:

<script>
    const $input = $("#tagfilter");
    const $items = $(".taglist");

    function filterItems(text) {
        text = text.trim().toLowerCase();
        if(text != ""){
            $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)
            });
        }
        else{
            $(".taglist").removeClass("fw-bold text-light bg-dark rounded p-1")
        }
    }

    $input.on("input", function() {
      filterItems($(this).val());
    }); 
</script>

相关问题