<input type="text" placeholder="искать фильм">
<div class="container"></div>

body, html {
  font-family: Helvetica, sans-serif;
}
.container { display: flex; flex-wrap: wrap; }
.movie {
  border: 1px solid #CCC;
  border-radius: 2px;
  margin: 1em;
  padding:1em;
  width: 200px;
  background-color:#EEE;
}

const input = document.querySelector('input');
const div = document.querySelector('div');
const films = [
  { name: 'Мачо и ботан', genre: 'комедия', year: 2012 },
  { name: 'Интерстеллар', genre: 'фантастика', year: 2014 },
  { name: '1 + 1', genre: 'комедия', year: 2011 },
  { name: 'Тайна Коко', genre: 'Приключения', year: '2017' },
  { name: 'Возвращение кота', genre: 'Фэнтези', year: '2002' },
];
const update = () => {
  const { value } = input;
  if (value.length === 0) {
    div.innerHTML = '';
    return;
  }
  const search = value.toLowerCase();
  const matching = films.filter(({ name }) => name.toLowerCase().includes(search));
  if (matching.length) {
    div.innerHTML = matching
      .map(
        ({ name, genre, year }) => `
          <div class="movie">
            <h4>${name} (${year})</h4>
            <p>${genre}</p>
          </div>
        `
      )
      .join('\n');
  } else {
    div.innerHTML = '<p><i>Кина не будет&hellip;</i></p>';
  }
};
input.addEventListener('input', update);