• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Prosty problem do rozwiązania dla tych co się znają na JavaScript

Aruba Cloud - Virtual Private Server VPS
0 głosów
261 wizyt
pytanie zadane 2 stycznia 2020 w JavaScript przez oOSzymonOo Nowicjusz (220 p.)

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>

 

komentarz 2 stycznia 2020 przez Comandeer Guru (606,910 p.)
Proszę zmienić tytuł wątku na bardziej opisujący problem.

2 odpowiedzi

+1 głos
odpowiedź 2 stycznia 2020 przez Comandeer Guru (606,910 p.)
wybrane 4 stycznia 2020 przez oOSzymonOo
 
Najlepsza

Proszę, prosta wyszukiwarka, zgodna z nowoczesnymi praktykami: https://codepen.io/Comandeer/pen/MWYOWGP

komentarz 4 stycznia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Dlaczego innerText, a nie textContent? Czy innerText nie jest gorszy, bo powoduje reflow treści? Czy to nic nie znaczący szczegół? :P

komentarz 4 stycznia 2020 przez Comandeer Guru (606,910 p.)

Faktycznie, w tym przypadku textContent będzie wystarczające. Niemniej często potrzeba pobrać faktycznie wyrenderowany tekst i innerText się sprawdzi o wiele lepiej. 

Co do reflowu, trzeba by było zrobić odpowiednie testy wydajnościowe.

–1 głos
odpowiedź 2 stycznia 2020 przez antypop Mądrala (5,730 p.)
1
komentarz 2 stycznia 2020 przez Comandeer Guru (606,910 p.)

Ten kod to pokaz najgorszych i przestarzałych praktyk:

  • Nie powinno się używać atrybutów [on…] w kodzie.
  • Zdarzenie keyup nie służy do wykrywania zmian w polu formularza, od tego jest input.
  • Pole formularza nie ma etykiety ([placeholder] jej nie zastępuje).
  • Wszystko jest stylowane przy pomocy [id] i niepotrzebnie rozwlekłych selektorów.
  • Nazwa funkcji, która filtruje listę, jest całkowicie bez sensu.
  • Hoisting jest niepotrzebnie rozwleczony. Nie ma sensu oddzielnie deklarować i przypisywać wartości do zmiennych, skoro i tak to robimy na samym początku funkcji. Dodatkowo mamy rok 2020 i var mogłoby już spocząć w pokoju.
  • Zamiast używać getElementById i getElementsByTagName można użyć po prostu querySelectorAll – zwłaszcza, że zwraca statyczną kolekcję elementów, a nie żywą.
  • Zamiast kodu imperatywnego, można bez problemu zrobić elements.forEach – dzięki temu kod z miejsca staje się o wiele bardziej czytelny.
  • Zamiast przypisywać bezpośrednio style, o wiele lepiej jest operować na klasach elementu.

Serio nie ma sensu polecać źródła, które od 20 lat poleca te same, od lat przestarzałe i uznane za złe, praktyki.

komentarz 2 stycznia 2020 przez oOSzymonOo Nowicjusz (220 p.)
Ważne że działa ;)

Dziękuję
2
komentarz 2 stycznia 2020 przez Comandeer Guru (606,910 p.)

Ważne że działa ;)

Wbijanie gwoździ głową też działa, ale później ma się dość nieprzyjemne konsekwencje. Ale na szczęście to już nie mój problem. 

Podobne pytania

+1 głos
0 odpowiedzi 184 wizyt
0 głosów
2 odpowiedzi 1,684 wizyt
pytanie zadane 14 stycznia 2020 w JavaScript przez juske00 Początkujący (370 p.)
0 głosów
1 odpowiedź 301 wizyt

93,335 zapytań

142,330 odpowiedzi

322,409 komentarzy

62,670 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...