Поиск по списку

Поиск по списку, который использует поиск по атрибуту name

by Anatoly Kulikov

HTML

<main>
  <input type="search" id="filter">
  <div class="searchable">
    <span>Группа 1</span>
    <div name="Александр Смирнов">
      <b>Александр Смирнов</b><p>10</p>
    </div>
    <div name="Андрей Лебедев">
      <b>Андрей Лебедев</b><p>11</p>
    </div>
    <div name="Владислав Николаев">
      <b>Владислав Николаев</b><p>23</p>
    </div>
    <div name="Василий Сидоров">
      <b>Василий Сидоров</b><p>41</p>
    </div>
    <div name="Денис Павлов">
      <b>Денис Павлов</b><p>15</p>
    </div>
    <div name="Арина Волкова">
      <b>Арина Волкова</b><p>52</p>
    </div>
    <div name="Валерия Калинина">
      <b>Валерия Калинина</b><p>12</p>
    </div>
    <div name="Марина Федотова">
      <b>Марина Федотова</b><p>124</p>
    </div>
    <div name="Давид Зайцев">
      <b>Давид Зайцев</b><p>35</p>
    </div>
    <span>Группа 2</span>
    <div name="Арсений Иванов">
      <b>Арсений Иванов</b><p>534</p>
    </div>
    <div name="Карина Комарова">
      <b>Карина Комарова</b><p>34</p>
    </div>
    <div name="Ангелина Алексеева">
      <b>Ангелина Алексеева</b><p>235</p>
    </div>
    <div name="Вероника Потапова">
      <b>Вероника Потапова</b><p>12</p>
    </div>
    <div name="Екатерина Сидорова">
      <b>Екатерина Сидорова</b><p>43</p>
    </div>
    <div name="Константин Жданов">
      <b>Константин Жданов</b><p>12</p>
    </div>
    <div name="Кирилл Дроздов">
      <b>Кирилл Дроздов</b><p>43</p>
    </div>
    <div name="Матвей Носков">
      <b>Матвей Носков</b><p>1</p>
    </div>
  </div>
</main>

SCSS

body {
  background: #f7f7f7;
}
main {
  display: block;
  width: 70%;
  margin: 10px auto;
  padding: 20px;
  background: #ffffff;
}
input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0px auto 10px;
  padding: 6px;
  font-size: 16px;
}
.searchable {
  display: block;
  width: 100%;
  
  span {
    display: block;
    width: 100%;
    padding: 5px 0px;
    font-size: 20px;
    font-weight: bold;
    border-bottom: #2196F3 solid 1px;
  }
  
  div {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px 0px;
    font-size: 18px;
    border-bottom: #f7f7f7 solid 1px;
    
    b {
      display: block;
      font-weight: normal;
    }
    p {
      display: block;
      margin: 0;
      font-weight: normal;
    }
  }
  div:last-of-type {
    border-bottom: none;
  }
}

JavaScript

$('#filter').keyup(function() {

  var rex = new RegExp('.*(' + $(this).val() + ')+.*', 'i');
  $('.searchable div').hide();
  $('.searchable div').filter(function() {
    return rex.test($(this).attr('name').replace(/[^\wа-яё]+/gi, ""));
  }).show();

})