<h2>Поле фильтра</h2>
<input id='filter-input' type='text'> <i>(текст для поиска здесь)</i>
<div id='container'>
  <p class='hidden'>Пиза</p>
  <p class='hidden'>Париж</p>
  <p class='hidden'>Урюпинск</p>
  <p class='hidden'>Минусинск</p>
  <p class='hidden'>Плюсинск</p>
  <p class='hidden'>Юго-Северный</p>
  <p class='hidden'>Нижние Васюки</p>
  
</div>
.hidden{
  display: none;
}

input{
  font-size:24px;
  margin-bottom:15px;
}

p{
  background-color: gray;
  color :white;
  font-size:18px;
  width:200px;
  padding:5px;
  margin: 3px;
}
$("body").on("keyup", "#filter-input", function() {
  var searchText =
      $("#filter-input")
  .val()
  .toLowerCase() || "___";
  $("#container > p").each(function(i) {
    var elem = $(this);
    if (
      elem
      .html()
      .toLowerCase()
      .indexOf(searchText) === -1
    ) {
      elem.addClass("hidden");
    } else {
      elem.removeClass("hidden");
    }
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js