JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<input type="search" id="txt">
<input type="button" id="btn" value="Найти">
<br>
<br>
<div class="wrap">
  <div class="img_bmw"></div>
  <div class="img_aston"></div>
  <div class="img_acura"></div>
  <div class="img_audi"></div>
  <div class="img_ferrari"></div>
</div>

CSS

div[class*=img] {
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 2px solid blue;
}

div:not(.wrap) {
  background: #a500ff;
}
.wrap {
  border:2px solid red;
  height: 2000px;
}
.img_ferrari{
 position:absolute;
 top:1000px;
}

JavaScript

(function() {
    var button = document.getElementById("btn");
    button.onclick = function() {
      var found = document.getElementById("txt").value,
        but = document.querySelectorAll('div[class*=' + found + ']'),
        div = document.querySelectorAll('div');
      [].forEach.call(div, function(elem) {
        elem.style.border = '2px solid blue';
      })
      if (but != []) {
        [].forEach.call(but, function(elem) {
            elem.style.border = '2px solid red';
            elem.scrollIntoView(top);
            })
        } else {
          alert("erorr")
        }
      };
    })();