БЛОГ НА HUSL


Bootstrap, как вернуть элементы в начало после search

Автор вопроса: Jenka

Использую search, все работает, оставляет элементы с тес названием, которое указал в строке поиска, но проблема в том, что эти элементы остаются на своих местах. К примеру если элемент находится в самом конце страницы, то он не вернется после поиска в начало, будет чистая страница, а в самом конце этот элемент, как это исправить? Чтобы вы поняли проблему на 100%, напишите в поиске "новоселье" без кавычек.

$(document).ready(function(){
    $("#filter").keyup(function(){
        var filter = $(this).val(), count = 0;

        $(".liveSearchBar .card").each(function(){

            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).fadeOut();
            } else {
                $(this).show();
                count++;
            }
        });
    });
});
.search{
  margin: 10px;
}
.card{
  margin: 10px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div class="container">
  <input class="form-control search" id="filter" type="text" placeholder="Поиск" aria-label="Поиск">
  
  <div class="row liveSearchBar">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 col-xxl-2 mb-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Акростих</h5>
      </div>
      <div class="card-footer">
        <small class="text-muted">Николай Гоголь</small>
      </div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 col-xxl-2 mb-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Новоселье</h5>
      </div>
      <div class="card-footer">
        <small class="text-muted">Николай Гоголь</small>
      </div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 col-xxl-2 mb-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Ганц Кюхельгартен</h5>
      </div>
      <div class="card-footer">
        <small class="text-muted">Николай Гоголь</small>
      </div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 col-xxl-2 mb-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Италия</h5>
      </div>
      <div class="card-footer">
        <small class="text-muted">Николай Гоголь</small>
      </div>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 col-xxl-2 mb-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Коллективные шуточные стихотворения</h5>
      </div>
      <div class="card-footer">
        <small class="text-muted">Николай Гоголь</small>
      </div>
    </div>
  </div>
  
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 col-xxl-2 mb-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Молитва</h5>
      </div>
      <div class="card-footer">
        <small class="text-muted">Николай Гоголь</small>
      </div>
    </div>
  </div>
</div>


Источник

Ответы (1 шт):

Автор решения: nazarpunk

Потому что вы скрываете .card а не его родителя, по которому и строится сетка.

$(document).ready(function() {
  $("#filter").keyup(function() {
    var filter = $(this).val(),
      count = 0;

    $(".liveSearchBar .card").each(function() {

      if ($(this).text().search(new RegExp(filter, "i")) < 0) {
        $(this).closest(`.search-item`).fadeOut();
      } else {
        $(this).closest(`.search-item`).show();
        count++;
      }
    });
  });
});
.search {
  margin: 10px;
}

.card {
  margin: 10px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div class="container">
  <input class="form-control search" id="filter" type="text" placeholder="Поиск" aria-label="Поиск">

  <div class="row liveSearchBar">
    <div class="search-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 col-xxl-2 mb-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Акростих</h5>
        </div>
        <div class="card-footer">
          <small class="text-muted">Николай Гоголь</small>
        </div>
      </div>
    </div>

    <div class="search-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 col-xxl-2 mb-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Новоселье</h5>
        </div>
        <div class="card-footer">
          <small class="text-muted">Николай Гоголь</small>
        </div>
      </div>
    </div>

    <div class="search-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 col-xxl-2 mb-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Ганц Кюхельгартен</h5>
        </div>
        <div class="card-footer">
          <small class="text-muted">Николай Гоголь</small>
        </div>
      </div>
    </div>

    <div class="search-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 col-xxl-2 mb-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Италия</h5>
        </div>
        <div class="card-footer">
          <small class="text-muted">Николай Гоголь</small>
        </div>
      </div>
    </div>

    <div class="search-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 col-xxl-2 mb-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Коллективные шуточные стихотворения</h5>
        </div>
        <div class="card-footer">
          <small class="text-muted">Николай Гоголь</small>
        </div>
      </div>
    </div>

    <div class="search-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 col-xxl-2 mb-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Молитва</h5>
        </div>
        <div class="card-footer">
          <small class="text-muted">Николай Гоголь</small>
        </div>
      </div>
    </div>
  </div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.