Сделать поисковый ввод для фильтрации по списку Jquery
Привет, я пытаюсь создать поле поиска, которое будет фильтровать или показывать / скрывать (что всегда лучше) элементы списка на основе того, что пользователь набрал и нажал кнопку поиска. Я понятия не имею, как это сделать. все, что я пробовал, к сожалению, не работает, и я не уверен, какой подход лучше для этого, например, я использую show and hide или есть что-то лучше?
Это мой HTML:
<html>
<head>
</head>
<body>
<label for="filter">Filter</label>
<input type="text" name="filter" value="" id="filter" />
<a id="addtag" href="#">Search</a>
<ul>
<li id="Hero1">Superman</li>
<li id="Hero2">Batman</li>
<li id="Hero3">Spiderman</li>
<li id="Hero4">Iron Man</li>
<li id="Hero5">The Hulk</li>
</ul>
</body>
</html>
Таким образом, если кто-то наберет «Супермен» и нажмет кнопку поиска, то будет отображаться только элемент списка Супермен.
Любая помощь в этом была бы отличной. Благодарю.