Question

我正在使用keyup事件处理程序并过滤一些元素。如果没有包含我要搜索的元素，则显示一条消息，提示没有结果，并在有结果时将其删除。除非在这种情况下，否则一切正常：

输入没有任何结果的内容。现在按住“退格键”可以快速删除字符。仍然显示“无结果”。似乎是时间问题，或者也许我不应该使用keyup。有什么想法吗？

这是一个codepen：https://codepen.io/west4me/pen/dQZxMZ

我认为这可能是关键：

$("#filter").keyup(function() {
	var selectSize = $(this).val();
	filter(selectSize);
});

$("#filter").keyup(function() {
  var selectSize = $(this).val();
  filter(selectSize);
});

function filter(e) {
  var numVisible = 0;
  var addCard = $('.ourTeamCards');
  if (e) {
    var regex = new RegExp('\\b\\w*' + e + '\\w*\\b', 'i');
    $('.oneStaff').fadeOut(50).filter(function() {
      var regExists = regex.test($(this).data('regions'));
      if (regExists) {
        numVisible += 1;
      }
      return regExists;
    }).fadeIn(50);
    if (numVisible == 0) {
      $('.noResults').css('display', 'block');
    } else {
      $('.noResults').css('display', 'none');
    }
  } else {
    $('.oneStaff').fadeIn(50);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-12">
    <div class="filterSearch">
      <h1 class="">Filter</h1>
      <input id="filter" type="text" class="form-control quicksearch" placeholder="Search">
      <span class="d-block mt-2 searchIns">Search by country or state</span>
    </div>
  </div>
</div>
<div class="row ourTeamCards">
  <div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah, Wyoming">
    Name
  </div>
  <div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah">
    Name
  </div>
  <div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah">
    Name
  </div>
</div>
<div class="noResults" style="display:none;">No Results</div>

Answer 1

您的else部分应如下所示：（请参见带有注释的行//这是一个更改）。用表示如果搜索框中没有值，则应隐藏“无结果”。

function filter(e) {
    var numVisible = 0;
    var addCard = $('.ourTeamCards');
    if(e) {
        var regex = new RegExp('\\b\\w*' + e + '\\w*\\b', 'i');
        $('.oneStaff').fadeOut(50).filter(function () {
            var regExists = regex.test($(this).data('regions'));
            if(regExists) {
                numVisible +=1; 
            }
            return regExists;
        }).fadeIn(50);
        if (numVisible == 0 && e) {
            $('.noResults').css('display', 'block');    
        }
        else {
            $('.noResults').css('display', 'none');
        }
    }   
    else {
      $('.oneStaff').fadeIn(50);
      $('.noResults').css('display', 'none'); //THIS IS A CHANGE
    }   
}

Answer 2

我对您提取文本框值的方式进行了一些更改。试试看，让我知道。

这还将标识退格键，因此将有助于执行所需的操作。我没有机会看完整的代码，但是一开始就发现了这一点，因此可以与您分享建议。

$("#filter").keyup(function(e) {
    var selectSize = e.target.value;
  console.log(selectSize)
    filter(selectSize);
});

干杯！

我应该使用keyup吗？

2 个答案: