Wyszukiwarka na stronie internetowej to narzędzie umożliwiające użytkownikom szybkie odnalezienie treści w ramach serwisu. Poniżej znajdziesz szczegółowy poradnik opisujący metody wykonania wyszukiwarki w HTML wraz z przykładami, omawiający najprostsze i bardziej zaawansowane rozwiązania.
Podstawowa wyszukiwarka html (frontend)
Najprostsza wyszukiwarka to po prostu formularz HTML, który zbiera zapytanie użytkownika:
<form action="/szukaj" method="get">
<input type="text" name="q" placeholder="Wyszukaj..." />
<button type="submit">Szukaj</button>
</form>
action– wskazuje adres, gdzie zostaną wysłane dane do przeszukania;method="get"– dane przesyłane są jako część adresu URL;name="q"– parametr, pod którym zapytanie użytkownika zostanie przesłane;placeholder– dodaje szary tekst pomocniczy w polu (np. „Wyszukaj…”).
Przykład zastosowania
Takie rozwiązanie można wykorzystać, gdy wyszukiwarka przesyła zapytanie do skryptu PHP, bazy danych lub wyszukuje wewnętrznie za pomocą JavaScriptu bez przeładowania strony. Przykładowo w witrynie blogowej użytkownik wpisuje frazę, a formularz przekierowuje do podstrony wyników.
Wyszukiwarka z domyślnym tekstem i stylizacją
Popraw komfort użytkownika, dodając tekst pomocniczy i stylizację pola:
<input type="text" name="search" placeholder="Wyszukaj artykuł..." />
Pole z atrybutem placeholder automatycznie znika, gdy użytkownik zaczyna wpisywać treść (nie trzeba ręcznie kasować domyślnego tekstu, jak przy atrybucie value).
Szybka stylizacja css
input[type="text"] {
width: 250px;
padding: 6px;
border: 1px solid #aaa;
border-radius: 4px;
}
input[type="text"]:focus {
border-color: #0066cc;
outline: none;
}
Wyszukiwarka z obsługą javascript i wyszukiwaniem dynamicznym
Wyszukiwarka może działać dynamicznie – bez przeładowania strony, idealnie nadaje się np. do listy produktów, katalogu artykułów czy FAQ.
Przykład – wyszukiwarka klienta
<input type="text" id="wyszukiwarka" placeholder="Wyszukaj produkt..." />
<ul id="lista">
<li>Telefon</li>
<li>Laptop</li>
<li>Tablet</li>
<li>Smartwatch</li>
</ul>
<script>
const input = document.getElementById('wyszukiwarka');
const lista = document.getElementById('lista');
const produkty = lista.getElementsByTagName('li');
input.addEventListener('keyup', function() {
const filtr = input.value.toLowerCase();
for (let i = 0; i < produkty.length; i++) {
const produkt = produkty[i].textContent.toLowerCase();
produkty[i].style.display = produkt.includes(filtr) ? "" : "none";
}
});
</script>
Opis działania – użytkownik wpisuje frazę w pole, a lista produktów w czasie rzeczywistym filtruje się, pokazując tylko pasujące wyniki.
Zaawansowane zastosowanie – wyszukiwarka indeksująca treści
Możesz zbudować własny indeks treści oraz wyszukiwarkę, korzystając z osobnych plików JavaScript przechowujących dane „kluczowe słowo – adres podstrony”.
Szkic struktury
- Plik indexujący (np.
indeks_hasla.js) zawiera listę haseł i odpowiadających adresów, - skrypt główny (np.
indeks.js) obsługuje logikę wyszukiwania i prezentację wyników, - wstawienia na stronie:
<script src="indeks.js"></script>oraz wywołanie:
<script> var indeks = new Indeks('indeks'); indeks.wstawWyszukiwarke('adres'); </script>.
To rozwiązanie występuje często w rozbudowanych dokumentacjach i dużych portalach edukacyjnych do przeszukiwania zawartości bezpośrednio na stronie.
Przykłady praktycznego wykorzystania wyszukiwarki
- Blog – pozwala czytelnikom szybko znaleźć interesujący artykuł po tytule lub opisie;
- Sklep internetowy – ułatwia klientom wyszukiwanie produktów wg nazw, kategorii czy parametrów;
- FAQ/centrum pomocy – użytkownicy błyskawicznie wyszukują odpowiedzi na najczęstsze pytania;
- Strona edukacyjna – uczniowie odszukują definicje, lekcje lub zadania, filtrując po haśle tematycznym.
Podsumowanie – najważniejsze wskazówki
- Najprostsza wyszukiwarka wymaga jedynie formularza HTML i przetwarzania na serwerze lub po stronie klienta;
- Warto dodać placeholdery zamiast domyślnych wartości, by poprawić ergonomię;
- Dynamiczne wyszukiwanie z JavaScript znacząco zwiększa wygodę korzystania i szybkość działania;
- W złożonych zastosowaniach możesz napisać własny indeks wyszukiwania lub użyć biblioteki do pełnotekstowego przeszukiwania treści.
Każda z tych metod może być dopasowana do stopnia zaawansowania projektu i potrzeb użytkownika – od bardzo prostych rozwiązań do własnych indeksów i dedykowanych algorytmów wyszukiwania.
