Witam!
Mam kod który chcę przekształcić na troszkę bardziej rozbudowany.
Chcę by działało to tak że wchodzę na stronę wpisuję w pole tekstowe tytuł filmu i znajduję mi film tylko żeby był dalej podlinkowany i resztę filmów które nie są podobne do wpisanych liter kasowało tak by wyrazy najbardziej pasujące zostały. Jednak by po skasowaniu liter w wyszukiwarce wszystko się pojawiło i po wpisaniu innego filmu ten film został znaleziony.
Stronę w html mam tylko w JavieScript trzeba coś porobić.
const searchInput = document.querySelector("input");
const li = [...document.querySelectorAll("ul a li")];
const ul = document.querySelector("ul");
const searchWord = e => {
const currentWord = e.target.value.toUpperCase();
let result = li;
result = result.filter(li => li.textContent.toUpperCase().includes(currentWord));
ul.textConent = '';
result.forEach(name => ul.appendChild(name));
}
searchInput.addEventListener('input', searchWord);
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>stronka</title>
<meta name="description" content="Serwis stworzony do oglądania najlepszych filmów." />
<meta name="keywords" content="wyszukiwarka" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="style Wyszukiwarka.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,900&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<div id="LogoL">
<img src="img/Logo.jpg" width="89" height="50"/>
</div>
<div id="LogoR">
<font color="#e4daba"><b>Logo</b></font>
</div>
<div id="Menu">
<div class="center-block"><a href="Index.html"><div class="option" style="border-left: 2px solid #fff200;float: left;">Filmy</div></a></div>
<div class="center-block"><a href="Zaloguj sie.html"><div class="option">Zaloguj się</div></a></div>
<div class="center-block"><a href="Zarejestruj sie.html"><div class="option">Rejestracja</div></a></div>
<div class="center-block"><a href="Kontakt.html"><div class="option">Kontakt</div></a></div>
<div class="center-block"><a href="Regulamin.html"><div class="option">Regulamin</div></a></div>
<div style="clear:both;"></div>
</div>
<div id="Content">
<div id="ContentWyszukiwarka"><form action="...">
<input type="text" name="nazwa" placeholder="Wpisz tu tytuł filmu którego szukasz" class="Wyglad"></form></div>
</div>
<div id="ContentTresc"><div id="Filmy">
<p style="text-align: center;">Wyniki wyszukiwania:</p>
<ul>
<a href="Film1.html"><li>Wilk z Wall Street</li></a>
<a href="Film2.html"><li>Zabawa w pochowanego</li></a>
<a href="Film3.html"><li>Zły Samarytanin</li></a>
<a href="Film4.html"><li>Uciekaj!</li></a>
</ul>
</div></div>
<div id="footer">
Najlepsza strona do oglądania filmów.
</div>
</div>
<script src="main.js"></script>
</body>
</html>