JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<input type="search" id="search" class="input-s search" placeholder="Введите компанию">
 
 <ul id="offerfilters" class="offerfilters"></ul>

JavaScript

/**
 * для вопроса https://qna.habr.com/q/951525
 * Как сделать «нет результата» для поиска?
 */
const companies = ['vk', 'fb', 'instagram', 'telegram', 'почта', 'телеграф', 'телефон', ];
const tmplItem = `
<li class="searchel filter-block-m">
  <a class="searchela">
    %%%%
  </a>
</li>
`;
const tmplNotFound = '<i>Ничего не найдено</i>';
const listEl = document.getElementById('offerfilters');
const searchField = document.getElementById('search');

const render = () => {
  const search = searchField.value.toUpperCase();
  const html = companies
    .filter(co => co.toUpperCase().includes(search))
    .map(co => tmplItem.replace('%%%%', co))
    .join('\n');
  
  listEl.innerHTML = html || tmplNotFound;
}

searchField.addEventListener('input', render);
render();