grigori,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.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;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).on("input", ".filter-input", function() {
var searchText = this.value.toLowerCase();
$(".show", this.parentNode).each(function(i, elem) {
var text = elem.textContent.toLowerCase();
var notFound = searchText && text.indexOf(searchText) === -1;
elem.classList.toggle("hidden", notFound)
});
});
</script>
</head>
<body>
<ul class="parent">
<label><span>Томская</span></label>
<ul class='children'>
<input class='filter-input' type='text'> <i>(текст для поиска здесь)</i>
<p class='show'>Томск</p>
<p class='show'>Асино</p>
<p class='show'>Молчаново</p>
<p class='show'>Колпашево</p>
<p class='show'>Стрежевой</p>
</ul>
<label><span>Новосибирская</span></label>
<ul class='children'>
<input class='filter-input' type='text'> <i>(текст для поиска здесь)</i>
<p class='show'>Новосибирск</p>
<p class='show'>Барабинск</p>
<p class='show'>Куйбышев</p>
<p class='show'>Бердск</p>
<p class='show'>Ордынское</p>
</ul>
<label><span>Кемеровская</span></label>
<ul class='children'>
<input class='filter-input' type='text'> <i>(текст для поиска здесь)</i>
<p class='show'>Кемерово</p>
<p class='show'>Новокузнецк</p>
<p class='show'>Междуреченск</p>
<p class='show'>Прокопьевск</p>
<p class='show'>Ленинск-Кузнецкий</p>
</ul>
</ul>
</body>
</html>