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

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

const listItems = $("li");

$("#filter").on("input", function() {
  let filter = $(this).val();
  if (filter) {
    listItems.hide();
    $(`li:contains('${filter}')`).show();
  } else {
    listItems.show();
  }
});

// case insensitive
jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};

External CSS

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

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js

Packages

This Pen doesn't use any packages.