javascript - jQuery keyup显示/隐藏时退格显示

所以我得到了这个小提琴：https://jsfiddle.net/htz8x1no/基本上在以下代码上运行：

      $('.relevant-results').hide();

      $('#input').keyup(function() {
        if ($(this).val().length < 3) {
          $('.relevant-results').hide();
        } else {
          $('.relevant-results').show();
        }
      });

当您在输入中输入3个以上的字符时，它将显示div，否则将隐藏它。这按预期工作，但是当用户删除（退格）它的一部分时，我想保持div可见。

因此，此keyup函数应仅在用户第一次输入时运行。使用jQuery / JS可以做到这一点吗？

最佳答案

您可以测试输入是否大于或等于三，然后显示div。无需隐藏逻辑。

$('.relevant-results').hide();

$('#input').keyup(function() {
   if ($(this).val().length >= 3) {
      $('.relevant-results').show();
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input">
<div class="relevant-results">
  Hello
</div>