検索バーアラート一致するjQueryがない場合

Question

私は自分のアプリ用の簡単な検索バーを作った。今すぐデータ属性でユーザーを検索しますが、一致するものが見つからない場合は何も表示しません。一致がないときにエラーメッセージを表示します。私は文を作成しましたが、入力に何かを入力して削除すると表示されます。検索バーでユーザーが見つからない場合にエラーメッセージをすぐに表示する方法

JS

 $(document).ready(function() { 
//  Pokaż/Ukryj wyszukiwarkę 
     $('.show-hide-search-bar').on('click', function() { 
      if ($('.searcher-section').is(":visible")) { 
       $('.searcher-section').hide("slide"); 
       $('.show-hide-search-bar').text('Pokaż Wyszukiwarkę'); 
      } else { 
       $('.searcher-section').show("slide"); 
       $('.show-hide-search-bar').text('Ukryj Wyszukiwarkę'); 
      } 
     }); 


//  Zmiana tekstu w zależności od pojawienia się searchera 
     if ($('#agents').length > 0) { 
      $('#label-searchbar').html('Imię, Nazwisko, Adres email'); 
      $('#input-searchbar').attr('placeholder', 'Podaj imię, nazwisko lub adres email'); 
     } else if ($('#company').length > 0) { 
      $('#label-searchbar').html('Nazwa biura'); 
      $('#input-searchbar').attr('placeholder', 'Podaj nazwę biura'); 
     } 


//Dynamiczne wyszukiwanie .card dla agentów | .clearfix dla listy 

     $('.searcher-input').keyup(function (event) { 
      $('.null-data').hide(); 
      if ($(this).val()) { 
       var input = $(this).val(); 
       var trimmedInput = input.trim(); 
       var terms = input.split(/\W+/g); 
       $(".card").hide(); 

       $(".clearfix.alt").hide(); 
       $(".card[data-agent*='" + trimmedInput + "' i]").show(); 

       $(".clearfix[data-name*='" + trimmedInput + "' i]").show(); 

//    $(".card[data-lastname*='" + trimmedInput + "']").show(); 
//    $(".card[data-lastname*='" + trimmedInput + "'][data-firstname*='" + trimmedInput + "']").show(); 
//    $(".card[data-email*='" + trimmedInput + "']").show(); 

       $(".col-xs-12").css("min-height", "0"); 
       $(".col-md-4").css("min-height", "0"); 
       $(".col-sm-5").css("min-height", "0"); 
       if ($('.card').is(':visible').get(0)) { 
        $('.null-data').show(function() { 
         $(this).effect("shake"); 
        }); 
       } 
       if (!$('.clearfix').is(':visible').get(0)) { 
        $('.null-data').show(function() { 
         $(this).effect("shake"); 
        }); 
       } 
      } else { 
       $(".clearfix.alt").show(); 
       $(".card").show(); 
       $('.null-data').show(function() { 
        $(this).effect("shake"); 
       }); 
      } 

     }); 


    }); 

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-12"> 

      <div class="searcher-section" style="display: none"> 
       <div class="show-hide-searcher"> 
        <div class="input-section"> 

         <div class="label-input-searcher"> 
          <label for="" class="searcher-label" id="label-searchbar"></label> 
          <input type="text" placeholder="" 
            class="searcher-input form-control" id="input-searchbar"/> 
          <div class="null-data" style="display: none;">Wprowadź poprawne dane</div> 

         </div> 

        </div> 

       </div> 
      </div> 
     </div> 
     <div class="show-hide-section"> 
      <button class="btn btn-success show-hide-search-bar" id="searchbar-button">Pokaż wyszukiwarkę</button> 
     </div> 
    </div> 
</div> 

<div class="container"> 
    <div class="row"> 
     <h3 class="title" id="agents">Doradcy</h3> 

     <div class="cards"> 
      @foreach($agents as $agent) 
       <div class="col-xs-12 col-sm-5 col-md-4"> 

        <div class="card" data-agent="{{$agent->firstname}} {{$agent->lastname}} {{$agent->email}}"> 
         <figure> 
          <div class="img-ref"> 
           <a href="" 
            class=""> 
            @if(isset($agent->has_avatar) && $agent->has_avatar !== 0) 
            <div style="background: url(''); background-size: cover;" class="photo"></div> 
            @else 
             <div style="background: url(''); background-size: cover;" 
              class="photo"></div> 
            @endif 
           </a> 
          </div> 
          <ul> 
           <li> 
            <a href="" 
             class="teamLink agent-color"> 
             <h3 class="agent-name">{{$agent->firstname}} {{$agent->lastname}}</h3>         </a> 
           </li> 
          </ul> 
          @if(isset($agent->company_name)) 
          <div class="teams-summary"> 
           {{$agent->company_name}} 
          </div> 
          @endif 
          <div class="contact-position"> 
           {{--telefon kontaktowy--}} 
           <div class="mobile-info card-contact-info"> 
            {{$agent->phone}} 
           </div> 
           {{--adres mailowy--}} 
           <div class="email-info card-contact-info"> 
            {{$agent->email}} 
           </div> 
          </div> 
         </figure> 
        </div> 
       </div> 
      @endforeach 
     </div> 
     {{----}} 
    </div> 
</div> 

Answer 1

チェック要素length

........ 
$(".clearfix.alt").hide(); 

if($(".card[data-agent*='" + trimmedInput + "' i]").length == 0) { 
    alert("no result"); 
    return; 
} 

$(".card[data-agent*='" + trimmedInput + "' i]").show(); 
....