<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");
}
});
});
This Pen doesn't use any external CSS resources.