<input type="text" id="filter" class="input" placeholder="filter">

<style id="cssFilter">
</style>
let HTML = "<div class='content'><ul>";
for (let i = 0; i < 100; i++) {
  let name = faker.name.findName();
  HTML += `<li data-name="${name}">${name}</li>`;
}
HTML += "</ul></div>";
document.body.insertAdjacentHTML('beforeend', HTML);

window.filter.addEventListener("input", e => {
  let filter = e.target.value;
  let css = filter ? `
    li {
      display: none;
    }
    li[data-name*="${filter}" i] {
      display: list-item;
    }
  ` : ``;
  window.cssFilter.innerHTML = css;
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/faker.js

Packages

This Pen doesn't use any packages.