jQuery Searchbar show data in order

Asked by: Konrad Uciechowski

I created Searchbar that scan every user and show them by name, data comes from Laravel to Frontend but there is a problem. When I type name of user it show users that name match to input but it only hide other users and leave empty spaces from them. Also when I type something into input, it shows me users but when i delete text from input other users don't back to their places. Do you have any hints for repair this in jQuery?

HTML

    <div class="container">
    <div class="row">
        <div class="show-hide-section">
            <button class="btn btn-success show-hide-search-bar">show searchbar</button>
        </div>
        <div class="col-xs-12 col-md-12">
            <div class="searcher-section">
                <div class="show-hide-searcher">
                    <div class="input-section">

                        <div class="label-input-searcher">
                            <label for="" class="searcher-label">Nazwa biura, telefon</label>

                            <input type="text" placeholder="Podaj jeden z parametrów: nazwę biura lub telefon"
                                   class="searcher-input form-control"/>
                            <div class="null-data">Wprowadź poprawną nazwę</div>
                        </div>

                        <div class="label-input-searcher">

                            <label for="" class="searcher-label">Lokalizacja</label>

                            <input type="text" placeholder="Podaj lokalizację" class="searcher-input form-control">

                        </div>

                        <button type="submit" class="searcher-button btn btn-primary"><i class="fa fa-search"
                                                                                         aria-hidden="true"></i>
                        </button>

                    </div>

                    <div class="select-section">

                        <label for="" class="searcher-label">Rodzaj transakcji</label>

                        <select>
                            <option value="sprzedaż">Sprzedaż</option>
                            <option value="wynajem">Wynajem</option>
                            <option value="oba">Sprzedaż i wynajem</option>
                        </select>

                        <label for="" class="searcher-label">Rodzaj nieruchomości</label>

                        <select>
                            <option value="mieszkanie">Mieszkanie</option>
                            <option value="dom">Dom</option>
                            <option value="lokal">Lokal</option>
                            <option value="grunt">Grunt</option>
                        </select>

                        <label for="" class="searcher-label">Rynek</label>

                        <select>
                            <option value="pierwotny">Pierwotny</option>
                            <option value="wtorny">Wtórny</option>
                            <option value="oba">Pierwotny i Wtórny</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="container">
  <div class="row">
    <h3 class="title" id="agents">Doradcy</h3> {{----}}
    <div class="cards">

      <div class="col-xs-12 col-sm-5 col-md-4">

        <div class="card" data-firstname="{{$agent->firstname}}" data-lastname="{{$agent->lastname}}" data-email="{{$agent->email}}">
          <figure>
            <div class="img-ref">
              <a href="" class=" ">
                <div style="background: url(' '); background-size: cover; " class="photo "></div>

                <div style="background: url(' '); background-size: cover;" class="photo"></div>

              </a>
            </div>
            <ul>
              <li>
                <a href="" class="teamLink">
                  <h3 class="agent-name"></h3> </a>
              </li>
            </ul>
            <div class="teams-summary">
            </div>
            <div class="contact-position">
              <div class="mobile-info card-contact-info">
              </div>
              <div class="email-info card-contact-info">

              </div>
            </div>
          </figure>
        </div>
      </div>
    </div>
    {{----}}
  </div>
</div>

Here is JS:

         //here some other code
     $(document).ready(function () {
        $(".photo").hover(function () {
            $(this).animate({"width": "160px", "height": "160px"});
        }, function () {
            $(this).animate({"width": "150px", "height": "150px"});
        });
        $(".card").hover(function () {
            $(this).addClass("cardHover")
        }, function () {
            $(this).removeClass("cardHover")
        });
    });


 // here it is code responsible for searchbar
 $(document).ready(function () {
        $('.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ę');
            }
        });
//Dynamiczne wyszukiwanie

        $('.searcher-input').keyup(function (event) {
            $('.null-data').hide();
            if ($(this).val()) {
                var input = $(this).val();
                console.log(input);
                $(".card").hide();
                $(".card[data-firstname*='" + input + "']").show();
                if (!$('.card:visible').get(0)) {
                    $('.null-data').show();
                }
            } else {
                $('.null-data').show();
            }
        });
    });

Source