javascript - jquery 仅在搜索中没有返回结果时才显示 div

Question

我有以下代码，需要一些指导。我需要 #no-results 元素仅在未找到结果时出现。目前它显示 IF 结果已找到。

 $('#no-results').hide();
        $('#video-search-text').keyup(function () {
            $('.video-search').hide();
            $('#no-results').css("display", "none");
            var txt = $('#video-search-text').val(); 

            $('.video-search').each(function () {
                if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1) {
                    $(this).show(); 

                }
                else {
                      $('#no-results').css("display", "block");

                }
            });

        });

我创建了以下 JSFiddle为了方便。谢谢

Answer 1

从 for each 循环中移除对无结果的检查，并将其放置在搜索完成之后。喜欢

 $('#no-results').hide();
 $('#video-search-text').keyup(function() {
     $('.video-search').hide();
     $('#no-results').css("display", "none");
     var txt = $('#video-search-text').val();
     var resultCount = 0;
     $('.video-search').each(function() {
         if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1) {
             $(this).show();
             resultCount++;
         }
     });

     if (resultCount == 0) {
         $('#no-results').css("display", "block");
     }

 });