Живой поиск jQuery (1.0)

Давайте-ка посмотрим на этот пример работы:

Рассмотрим код по порядку.

Допустим у нас есть определенная структура блоков. Например, как здесь:

<div class="blocks">
    <input class="js-search-block" type="text" placeholder="Введите текст и нажмите ENTER" />
    <div class="block">
        <div class="block-head">
            <div class="block-head__title">Слоновые</div>
            <div class="block-head__sep"></div>
            <div class="block-head__shortname">Elephants</div>
        </div>
        <div class="block-body">семейство млекопитающих отряда хоботных. В настоящее время к этому семейству относятся наиболее крупные наземные млекопитающие.</div>
    </div>
    <div class="block">
        <div class="block-head">
            <div class="block-head__title">Китообразные</div>
            <div class="block-head__sep"></div>
            <div class="block-head__shortname">Сetaceans</div>
        </div>
        <div class="block-body">(лат. Cetacea, в обиходе все китообразные, кроме дельфинов и морских свиней называются киты) — отряд млекопитающих.</div>
    </div>
    <div class="block">
        <div class="block-head">
            <div class="block-head__title">Свиньи</div>
            <div class="block-head__sep"></div>
            <div class="block-head__shortname">Pigs</div>
        </div>
        <div class="block-body">семейство нежвачных парнокопытных (Artiodactyla), включающее 8 видов, в том числе единственного европейского представителя семейства</div>
    </div>
</div>

И есть некая базовая стилизация:

.block,
.js-search-block
{
  border: 1px solid #000;
  margin: 10px 0;
  padding: 6px;
  max-width: 600px;
    width: 100%;
}
.block-head{
  display: flex;
}
.block-head__title{
  font-weight: bold;
}
.block-head__sep{
  width: 2px;
  height: 16px;
  background: #000;
  margin: 0px 10px;
}

Каким образом нам нужно заставить работать input, чтобы скрывались и показывались нужные блоки в любой блочной или табличной структуре.

Весь пример проделывается на jQuery.

Для начала, нам нужно зафиксировать событие jQuery. Это ввод с клавиатуры в текстовое поле, имеющее какой-либо селектор. В моем случае — .js-search-block

 $(".js-search-block").keyup(function() {

Как только происходит событие ввода с клавиатуры, мы записываем все введенные данные в перменную, которую будем искать в определенных местах блоков.

var $value = $(this).val();

А вот далее самое интересное, нам нужно пройтись по всем блокам, чтобы поискать в каждом из них нужное нам значение

$(".blocks .block").each(function(index) {

Записываем объект текущей строки в переменную

$row = $(this);

Собираем также нужные нам значения блоков в переменные

var animal_name = $row.find(".block-head__title").html();
var animaL_eng_name = $row.find(".block-head__shortname").html();

А далее просто сравниваем каждое из них с нашей переменной, что вводили в текстовое поле. Если часть текста, независимо от регистра и расположения, будет найдена в строке, то проводим определенные события.

var reg = new RegExp($value, "i");
if (animal_name.match(reg) || animal_eng_name.match(reg)) {
   $row.fadeIn("slow");
} else {
   $row.fadeOut("slow");
}

где — reg — объект регулярного выражения, на основе введенного нашего запроса.

animal_name.match и animaL_eng_name.match — это поиск нашей подстроки в полноценных строках: название животного и английское название животного. Если хотябы одно из них справедливо, то блок оставляем

$row.fadeIn(«slow»); и $row.fadeOut(«slow»); — медленное появление и потухание блоков. Сделано для более приятно визуализации.

В принципе разбор кода закончен. Если есть вопросы или дополнения, с радостью пообщаюсь с Вами.

p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне