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>
  <br>
<a class="spoiler">Расскрыть список</a>
<div id="drop">
  <div class="img_audi"></div>
  <div class="img_ferrari"></div>
</div>
</div>

CSS

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

div:not(.wrap):not(#drop) {
  background: #a500ff;
}
#drop{
  display:none;
}

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[class*=img]');
    [].forEach.call(div, function(elem) {
      elem.style.border = '2px solid blue';
    })
   
    if (but != []) {
      [].forEach.call(but, function(elem) {
        elem.style.border = '2px solid red';
      })
    } else {
      alert("erorr")
    }
  };
})();