Filtering bootstrap

HTML

<!-- Search functionality -->
    <nav class="navbar navbar-light justify-content-center mt-4">
      <form class="form-inline">
        <input class="form-control mr-sm-2" type="search" placeholder="Type a name" aria-label="Search" class="searchbox-input" id="search">
        <!-- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> -->
      </form>
    </nav>

    <!-- Cards -->
    <div class="layout-margin-8 mt-5">
      <div class="card-deck">
        <div class="card card-shadow text-center">
          <div class="card-body">
            <h4 class="card-title">Rob Doe</h4>
            <p class="card-text">UX Designer</p>
            <div class="dropdown-divider"></div>
            <p class="card-text"><small class="text-muted">Team A</small></p>
            <a href="#"><button type="button" class="btn btn-outline-primary">Email</button></a>
          </div>
        </div>
        <div class="card card-shadow text-center">
          <div class="card-body">
            <h4 class="card-title">Scott Doe</h4>
            <p class="card-text">UX Designer</p>
            <div class="dropdown-divider"></div>
            <p class="card-text"><small class="text-muted">Team B</small></p>
            <a href="#"><button type="button" class="btn btn-outline-primary">Email</button></a>
          </div>
        </div>
        <div class="card card-shadow text-center">
          <div class="card-body">
            <h4 class="card-title">John Doe Vasile</h4>
            <p class="card-text">Product Designer</p>
            <div class="dropdown-divider"></div>
            <p class="card-text"><small class="text-muted">Team C</small></p>
            <a href="#"><button type="button" class="btn btn-outline-primary">Email</button></a>
          </div>
        </div>
        </div>
      </div>

CSS

/*!
  Customs CSS stylesheet
 */

body {
  background-color: #EEEEEE;
}

.layout-margin-8 {
  margin: 3% 8%;
}

.card-img-top-custom {
  width: 50%;
  margin: 0 auto;
}

.card-title {
  text-align: center;
}

.card-shadow {
  -webkit-box-shadow: 0px 0px 28px 14px rgba(232,232,232,1);
  -moz-box-shadow: 0px 0px 28px 14px rgba(232,232,232,1);
  box-shadow: 0px 0px 28px 14px rgba(232,232,232,1);
}

.card-deck {
  display: flex;
  justify-content: space-around;
  flex-flow: row wrap;
  align-items: stretch;
}

.card {
  padding: 3% 1.5%;
  border: none;
  max-width: 375px;
  flex-grow: 1;
}

@media (min-width: 768px) {
.form-control {
  width: 500px !important;
  height: 50px;
}
}

.bg-blue {
  background-color: #005EB8;
}

JavaScript

$('#search').keyup(function (){
        $('.card').show();
        var filter = $(this).val(); // get the value of the input, which we filter on
        $('.card-deck').find('.card .card-body h4:not(:contains(" + filter + "))').parent().parent().addClass('d-none');
      })