Фильтрация | JavaScript

• appendChild(), removeChild() или innerHTML
• Форма поиска по сайту CSS

На сайте redotheweb.com показано интересное решение фильтрации данных. Его я внедрила в список високосных лет.

Задумка основана на использовании псевдоклассов и селекторов CSS. Благодаря тому, что скрипт изменяет только один тег style, а не все элементы списка, увеличивается скорость поиска.

<style>
.contacts li {
 display: block;
 margin: 10px;
 padding: 10px;
 background-color: rgb(220, 234, 244);
}
.contacts li :before {
 font-weight: 900;
}
.contacts li :nth-of-type(1):before {
 content: "Имя: ";
}
.contacts li :nth-of-type(2):before {
 content: "Фамилия: ";
}
.contacts li :nth-of-type(3):before {
 content: "email: ";
}
.contacts li :nth-of-type(4):before {
 content: "телефон: ";
}
</style>

<input type="text" placeholder="поиск" id="search">
<style id="search-style"></style>
<ul class="contacts">
  <li data-index="марьяивановаmar.ivanova@yandex.ru89270000000">
    <div>Марья</div>
    <div>Иванова</div>
    <div>mar.ivanova@yandex.ru</div>
    <div>89270000000</div>
  <li data-index="иванпетровivan.petriv@mail.ru89031111111">
    <div>Иван</div>
    <div>Петров</div>
    <div>ivan.petriv@mail.ru</div>
    <div>89031111111</div>
  <li data-index="фёдорсидоровsidorov@mail.ru8172222222">
    <div>Фёдор</div>
    <div>Сидоров</div>
    <div>sidorov@mail.ru</div>
    <div>8172222222</div>
  <li data-index="людмиласнегирёваsnegir@gmail.com333-33-33">
    <div>Людмила</div>
    <div>Снегирёва</div>
    <div>snegir@gmail.com</div>
    <div>333-33-33</div>
</ul>

<script>
var searchStyle = document.getElementById('search-style');
document.getElementById('search').addEventListener('input', function() {
  if (!this.value) {
    searchStyle.innerHTML = '';
    return;
  }
  searchStyle.innerHTML = '.contacts li:not([data-index*="' + this.value.toLowerCase() + '"]) { display: none; }';
});
</script>

В data-index заносятся искомые данные с маленькой (строчной) буквы. При введении, скажем, буквы м в теге style появится запись

.contacts li:not([data-index*="м"]) { display: none; }

. Она означает, что если li в data-index не содержит буквы м, то такой li нужно удалить.

• Марья
  Иванова
  mar.ivanova@yandex.ru
  89270000000
• Иван
  Петров
  ivan.petriv@mail.ru
  89031111111
• Фёдор
  Сидоров
  sidorov@mail.ru
  8172222222
• Людмила
  Снегирёва
  snegir@gmail.com
  333-33-33

В списоке високосных лет этот же скрипт у меня выглядит как:

<ul data-index="1" class="spisokGod">
  <li>
    <ol data-index="15">
      <li data-index="1584">1584
      <li data-index="1588">1588
    </ol>
  <li>
    <ol data-index="16">
      <li data-index="1600">1600
      <li data-index="1604">1604
    </ol>
  </li>
</ul>

<ul data-index="2" class="spisokGod">
  <li>
    <ol data-index="20">
      <li data-index="2000">2000
      <li data-index="2004">2004
    </ol>
  <li>
    <ol data-index="21">
      <li data-index="2104">2104
      <li data-index="2108">2108
    </ol>
  </li>
</ul>

<script>
var searchStyle = document.getElementById('search-style');
document.getElementById('search').addEventListener('input', function() {
  if (!this.value) {
    searchStyle.innerHTML = '';
    return;
  }
  searchStyle.innerHTML = '.spisokGod ol li:not([data-index^="' + this.value + '"]), .spisokGod ol:not([data-index^="' + this.value.substr(0, 2) + '"]), .spisokGod:not([data-index^="' + this.value.substr(0, 1) + '"]) { display: none;}';

});
</script>

Здесь скрываются списки, которые не начинаются с цифр, вводимых пользователями в поле поиска. При проверке 2000 года в теге style можно увидеть:

.spisokGod ol li:not([data-index^="200"]),
.spisokGod ol:not([data-index^="20"]),
.spisokGod:not([data-index^="2"]) { display: none;}

Обрезание до нужного знака делает .substr(0, 1).