Izrada vlastite trake za pretraživanje s automatskim dovršavanjem lakša je nego što mislite.
Traka za pretraživanje je popularan element korisničkog sučelja koji koriste mnoge moderne web stranice. Ako gradite web mjesto koje sadrži bilo koju vrstu podataka, možda želite da vaši korisnici mogu pretraživati određene stavke.
Postoji mnogo načina na koje možete izgraditi traku za pretraživanje. Možete izraditi složene trake za pretraživanje koje vraćaju rezultate na temelju više filtara, poput imena ili datuma. Postojeće biblioteke mogu vam pomoći implementirati traku za pretraživanje bez da je gradite od nule.
Međutim, također možete stvoriti jednostavnu traku za pretraživanje pomoću vanilla JavaScripta, koja uspoređuje unos korisnika s popisom nizova.
Kako dodati korisničko sučelje za traku za pretraživanje
Vaša web stranica treba sadržavati okvir za unos u koji korisnici mogu unijeti tekst koji žele pretraživati. Jedan od načina da to učinite je da koristite oznaku za unos i stilizirate je da izgleda kao traka za pretraživanje.
- Napravite mapu za pohranu svoje web stranice. Unutar mape stvorite HTML datoteku pod nazivom index.html.
- Napunite datoteku osnovnom strukturom HTML dokumenta. Ako niste upoznati s HTML-om, ima ih mnogo Primjeri HTML koda koje možete naučiti kako bismo vam pomogli da ubrzate.
<!doctype html>
<html lang="en-US">
<glava>
<titula>Traka za pretraživanje</title>
</head>
<tijelo>
<div klasa="spremnik">
<!-- Sadržaj web stranice ide ovdje-->
</div>
</body>
</html> - Unutar div klase spremnika dodajte oznaku unosa. Ovo će omogućiti korisniku da upiše tekst koji želi pretražiti. Kad god unesu novi znak, vaša će web stranica pozvati funkciju search(). Ovu ćete funkciju izraditi u kasnijim koracima.
Atribut autocomplete osigurava da preglednik neće dodati vlastiti padajući izbornik na temelju prethodnih pojmova za pretraživanje.<div klasa="spremnik">
<h2>Traži zemlje</h2>
<unos id="traka za pretraživanje" autocomplete="isključeno" onkeyup="traži()" vrsta="tekst"
ime="traži" rezervirano mjesto="Što tražiš?">
</div> - U istoj mapi kao i vaša index.html datoteku, stvorite novu CSS datoteku pod nazivom stilovi.css.
- Napunite datoteku stilom za cjelokupnu web stranicu i traku za pretraživanje:
tijelo {
margina: 0;
ispuna: 0;
boja pozadine: #f7f7f7;
}
* {
obitelj-fontova: "Arial", sans-serif;
}
.kontejner {
ispuna: 100px 25%;
zaslon: savitljiv;
smjer savijanja: stupac;
visina linije: 2rem;
veličina fonta: 1.2em;
boja: #202C39;
}
#traka za pretraživanje {
ispuna: 15px;
rubni radijus: 5px;
}
ulazni[type=text] {
-webkit-prijelaz: širina 0.15sease-in-out;
tranzicija: širina 0.15sease-in-out;
} - U index.html, dodajte vezu na svoju CSS datoteku unutar oznake head i ispod oznake naslova:
<veza rel="stilski list" href="stilovi.css"> - Otvori index.html datoteku u web pregledniku i pogledajte korisničko sučelje svoje trake za pretraživanje.
Kako stvoriti nizove popisa za traku za pretraživanje
Prije nego što korisnik može pretraživati, morat ćete izraditi popis dostupnih stavki koje može pretraživati. To možete učiniti s nizom nizova. Žica je jedna od mnogih vrste podataka koje možete koristiti u JavaScriptu, i može predstavljati niz znakova.
Ovaj popis možete dinamički izraditi pomoću JavaScripta dok se stranica učitava.
- Iznutra index.html, ispod oznake za unos dodajte div. Ovaj div će prikazati padajući izbornik koji će sadržavati popis stavki koje odgovaraju onome što korisnik traži:
<div id="popis"></div> - U istoj mapi kao i vaša index.html datoteka i stilovi.css datoteku, stvorite novu datoteku pod nazivom skripta.js.
- Iznutra skripta.js, stvorite novu funkciju pod nazivom loadSearchData(). Unutar funkcije inicijalizirajte niz s popisom nizova. Imajte na umu da je ovo mali statičan popis. Složenija implementacija morat će uzeti u obzir pretraživanje kroz veće skupove podataka.
funkcijaloadSearchData() {
// Podaci koji će se koristiti u traci za pretraživanje
neka zemlje = [
'Australija',
'Austrija',
'Brazil',
'Kanada',
'Danska',
'Egipat',
'Francuska',
'Njemačka',
'SAD',
'Vijetnam'
];
} - Unutar loadSearchData() i ispod novog polja, nabavite element div koji će korisniku prikazati podudarne stavke pretraživanja. Unutar diva popisa dodajte oznaku sidra za svaku podatkovnu stavku na popisu:
// Dobivanje HTML elementa popisa
neka popis = dokument.getElementById('popis');
// Dodajte svaku podatkovnu stavku kao označiti
zemljama.za svakoga((država)=>{
neka a = dokument.createElement("a");
a.innerText = zemlja;
a.classList.add("listItem");
popis.appendChild (a);
}) - U oznaci tijela od index.html, dodajte atribut događaja onload za poziv nove funkcije loadSearchData(). Ovo će učitati podatke dok se stranica učitava.
<tijelo onload="loadSearchData()"> - U index.html, prije nego što oznaka tijela završi, dodajte oznaku skripte za povezivanje s vašom JavaScript datotekom:
<tijelo onload="loadSearchData()">
<!-- Sadržaj vaše web stranice -->
<skripta src="skripta.js"></script>
</body> - U stilovi.css, dodajte neki stil padajućem popisu:
#list {
obrub: 1px puna svijetlosiva;
rubni radijus: 5px;
prikaz: blok;
}
.listItem {
zaslon: savitljiv;
smjer savijanja: stupac;
tekst-ukras: nema;
ispuna: 5px 20px;
Crna boja;
}
.listItem:lebdjeti {
boja pozadine: svijetlo siva;
} - Otvoren index.html u web-pregledniku kako biste vidjeli traku za pretraživanje i popis dostupnih rezultata pretraživanja. Funkcija pretraživanja još ne radi, ali trebali biste vidjeti korisničko sučelje koje će koristiti:
Kako stvoriti padajući izbornik s odgovarajućim rezultatima unutar trake za pretraživanje
Sada kada imate traku za pretraživanje i popis nizova koje korisnici mogu pretraživati, možete dodati funkciju pretraživanja. Dok korisnik upisuje u traku za pretraživanje, prikazat će se samo određene stavke na popisu.
- U stilovi.css, zamijenite stil za popis da biste sakrili popis prema zadanim postavkama:
#list {
obrub: 1px puna svijetlosiva;
rubni radijus: 5px;
prikaz: nijedan;
} - U skripta.js, stvorite novu funkciju pod nazivom search(). Imajte na umu da će program pozvati ovu funkciju svaki put kada korisnik unese ili ukloni znak iz trake za pretraživanje. Neke će aplikacije trebati putovati do poslužitelja da dohvate informacije. U takvim bi slučajevima ova implementacija mogla usporiti vaše korisničko sučelje. Možda ćete morati izmijeniti implementaciju kako biste to uzeli u obzir.
funkcijatraži() {
// funkcija pretraživanja ide ovdje
} - Unutar funkcije search() dohvatite HTML div element za popis. Također preuzmite elemente HTML oznake sidra za svaku stavku unutar popisa:
neka listContainer = dokument.getElementById('popis');
neka popis Stavki = dokument.getElementsByClassName('listItem'); - Dobijte unos koji je korisnik unio u traku za pretraživanje:
neka unos = dokument.getElementById('traka za pretraživanje').vrijednost
input = input.toLowerCase(); - Usporedite unos korisnika sa svakom stavkom na popisu. Na primjer, ako korisnik unese "a", funkcija će usporediti je li "a" unutar "Australije", zatim "Austrije", "Brazila", "Kanade" i tako dalje. Ako odgovara, prikazat će tu stavku na popisu. Ako se ne podudara, sakrit će tu stavku.
neka nema rezultata = pravi;
za (i = 0; ja < listItems.length; i++) {
if (!listItems[i].innerHTML.toLowerCase().includes (unos) || unos "") {
listItems[i].style.display="nikakav";
nastaviti;
}
drugo {
listItems[i].style.display="savijati";
nema rezultata = lažno;
}
} - Ako na popisu uopće nema rezultata, potpuno sakrijte popis:
listContainer.style.display = noResults? "nikakav": "blok"; - Klikni na index.html datoteku da biste je otvorili u web pregledniku.
- Počnite upisivati u traku za pretraživanje. Dok upisujete, popis rezultata će se ažurirati kako bi prikazao samo odgovarajuće rezultate.
Korištenje trake za pretraživanje za traženje odgovarajućih rezultata
Sada kada znate kako stvoriti traku za pretraživanje s odabirom niza, možete dodati više funkcija.
Na primjer, možete dodati veze svojim oznakama sidra za otvaranje različitih stranica ovisno o rezultatu koji korisnik klikne. Traku za pretraživanje možete promijeniti za pretraživanje složenijih objekata. Također možete modificirati kod da radi s okvirima kao što je React.
