Ustvarjanje lastne iskalne vrstice za samodokončanje je lažje, kot si mislite.
Iskalna vrstica je priljubljen element uporabniškega vmesnika, ki ga uporabljajo mnoga sodobna spletna mesta. Če gradite spletno mesto, ki vsebuje kakršne koli podatke, boste morda želeli, da bodo vaši uporabniki lahko iskali določene elemente.
Iskalno vrstico lahko zgradite na več načinov. Ustvarite lahko zapletene iskalne vrstice, ki vrnejo rezultate na podlagi več filtrov, kot sta ime ali datum. Obstoječe knjižnice vam lahko pomagajo implementirati iskalno vrstico, ne da bi jo zgradili iz nič.
Vendar pa lahko ustvarite tudi preprosto iskalno vrstico z uporabo vanilla JavaScripta, ki primerja uporabnikov vnos s seznamom nizov.
Kako dodati uporabniški vmesnik za iskalno vrstico
Vaše spletno mesto mora vsebovati polje za vnos, v katerega uporabniki lahko vnesejo besedilo, ki ga želijo iskati. Eden od načinov za to je, da uporabite vnosno oznako in jo oblikujete tako, da bo videti kot iskalna vrstica.
- Ustvarite mapo za shranjevanje vašega spletnega mesta. Znotraj mape ustvarite datoteko HTML z imenom index.html.
- Napolnite datoteko z osnovno strukturo dokumenta HTML. Če niste seznanjeni s HTML, jih je veliko Primeri kode HTML, ki se jih lahko naučite da vam pomaga priti do hitrosti.
<!doctype html>
<html lang="en-US">
<glavo>
<naslov>Iskalna vrstica</title>
</head>
<telo>
<razred div="posoda">
<!-- Vsebina spletne strani je tukaj-->
</div>
</body>
</html> - Znotraj diva razreda vsebnika dodajte vhodno oznako. To bo uporabniku omogočilo vnos besedila, ki ga želi iskati. Kadarkoli vnesejo nov znak, bo vaše spletno mesto poklicalo funkcijo search(). To funkcijo boste ustvarili v kasnejših korakih.
Atribut samodokončanja zagotavlja, da brskalnik ne bo dodal lastnega spustnega menija na podlagi prejšnjih iskalnih izrazov.<razred div="posoda">
<h2>Iskanje držav</h2>
<vnos id="iskalna vrstica" samodokončanje="izklopljeno" onkeyup="Iskanje()" vrsta="besedilo"
ime="Iskanje" placeholder="Kaj iščeš?">
</div> - V isti mapi kot vaša index.html ustvarite novo datoteko CSS z imenom styles.css.
- Izpolnite datoteko s slogom za celotno spletno stran in iskalno vrstico:
telo {
rob: 0;
oblazinjenje: 0;
Barva ozadja: #f7f7f7;
}
* {
družina pisav: "Arial", sans-serif;
}
.posoda {
oblazinjenje: 100 slikovnih pik 25 %;
zaslon: flex;
flex-direction: stolpec;
višina vrstice: 2rem;
velikost pisave: 1.2em;
barva: #202C39;
}
#searchbar {
oblazinjenje: 15px;
polmer obrobe: 5px;
}
vnos[type=text] {
-webkit-prehod: premer 0.15sease-in-out;
prehod: premer 0.15sease-in-out;
} - notri index.html, dodajte povezavo do vaše datoteke CSS znotraj oznake head in pod oznako naslova:
<povezava rel="slogovna tabela" href="styles.css"> - Odprite index.html datoteko v spletnem brskalniku in si oglejte uporabniški vmesnik iskalne vrstice.
Kako ustvariti seznam nizov za iskalno vrstico
Preden lahko uporabnik išče, boste morali ustvariti seznam razpoložljivih elementov, ki jih lahko išče. To lahko storite z nizom nizov. Vrvica je ena izmed mnogih vrste podatkov, ki jih lahko uporabite v JavaScriptu, in lahko predstavlja zaporedje znakov.
Ta seznam lahko dinamično ustvarite z JavaScriptom, medtem ko se stran nalaga.
- V notranjosti index.html, pod vnosno oznako dodajte div. Ta div bo prikazal spustni meni, ki bo vseboval seznam elementov, ki se ujemajo s tem, kar uporabnik išče:
<div id="seznam"></div> - V isti mapi kot vaša index.html datoteka in styles.css datoteko, ustvarite novo datoteko z imenom script.js.
- V notranjosti script.js, ustvarite novo funkcijo z imenom loadSearchData(). Znotraj funkcije inicializirajte matriko s seznamom nizov. Ne pozabite, da je to majhen statičen seznam. Kompleksnejša izvedba bo morala upoštevati iskanje po večjih zbirkah podatkov.
funkcijoloadSearchData() {
// Podatki za uporabo v iskalni vrstici
pustiti države = [
'Avstralija',
'Avstrija',
'Brazilija',
'Kanada',
'Danska',
'Egipt',
'Francija',
'Nemčija',
'ZDA',
'Vietnam'
];
} - Znotraj loadSearchData() in pod novo matriko pridobite element div, ki bo uporabniku prikazal ujemajoče se iskalne elemente. Znotraj div seznama dodajte sidrno oznako za vsako podatkovno postavko na seznamu:
// Pridobite element HTML seznama
pustiti seznam = dokument.getElementById('seznam');
// Dodajte vsako podatkovno postavko kot oznaka
države.za vsakogar((država)=>{
pustiti a = dokument.createElement("a");
a.innerText = država;
a.classList.add("listItem");
seznam.appendChild (a);
}) - V telesni oznaki index.html, dodajte atribut dogodka onload za klic nove funkcije loadSearchData(). To bo naložilo podatke med nalaganjem strani.
<body onload="loadSearchData()"> - notri index.html, preden se oznaka telesa konča, dodajte oznako skripta za povezavo do vaše datoteke JavaScript:
<body onload="loadSearchData()">
<!-- Vsebina vaše spletne strani -->
<skript src="script.js"></script>
</body> - notri styles.css, dodajte nekaj sloga na spustni seznam:
#list {
obroba: 1px polna svetlosiva;
polmer obrobe: 5px;
zaslon: blok;
}
.listItem {
zaslon: flex;
flex-direction: stolpec;
tekst-dekoracija: brez;
oblazinjenje: 5px 20px;
barva: črna;
}
.listItem:lebdi {
barva ozadja: svetlo siva;
} - Odprto index.html v spletnem brskalniku za ogled iskalne vrstice in seznama razpoložljivih rezultatov iskanja. Funkcija iskanja še ne deluje, vendar bi morali videti uporabniški vmesnik, ki ga bo uporabljal:
Kako ustvariti spustni meni z ujemajočimi se rezultati v iskalni vrstici
Zdaj, ko imate iskalno vrstico in seznam nizov, po katerih lahko uporabniki iščejo, lahko dodate funkcijo iskanja. Ko uporabnik tipka v iskalno vrstico, se prikažejo le določeni elementi na seznamu.
- notri styles.css, zamenjajte slog za seznam, da privzeto skrijete seznam:
#list {
obroba: 1px polna svetlosiva;
polmer obrobe: 5px;
zaslon: brez;
} - notri script.js, ustvarite novo funkcijo z imenom search(). Ne pozabite, da bo program poklical to funkcijo vsakič, ko uporabnik vnese ali odstrani znak iz iskalne vrstice. Nekatere aplikacije potrebujejo pot do strežnika, da pridobijo informacije. V takih primerih lahko ta izvedba upočasni vaš uporabniški vmesnik. Morda boste morali spremeniti izvedbo, da boste to upoštevali.
funkcijoIskanje() {
// funkcija iskanja je tukaj
} - Znotraj funkcije search() pridobite element div HTML za seznam. Pridobite tudi elemente sidrne oznake HTML vsakega elementa na seznamu:
pustiti listContainer = dokument.getElementById('seznam');
pustiti listItems = dokument.getElementsByClassName('listItem'); - Pridobite vnos, ki ga je uporabnik vnesel v iskalno vrstico:
pustiti vnos = dokument.getElementById('searchbar').value
input = input.toLowerCase(); - Primerjajte vnos uporabnika z vsakim elementom na seznamu. Na primer, če uporabnik vnese "a", bo funkcija primerjala, ali je "a" znotraj "Avstralija", potem "Avstrija", "Brazilija", "Kanada" itd. Če se ujema, bo ta element prikazan na seznamu. Če se ne ujema, bo ta element skril.
pustiti brez rezultatov = prav;
za (i = 0; jaz < listItems.length; i++) {
if (!listItems[i].innerHTML.toLowerCase().includes (input) || input "") {
listItems[i].style.display="nič";
nadaljevati;
}
drugače {
listItems[i].style.display="flex";
brez rezultatov = lažno;
}
} - Če na seznamu sploh ni rezultatov, seznam popolnoma skrijte:
listContainer.style.display = noResults? "nič": "blok"; - Kliknite na index.html datoteko, da jo odprete v spletnem brskalniku.
- Začnite tipkati v iskalno vrstico. Med tipkanjem se bo seznam rezultatov posodabljal tako, da bodo prikazani samo ujemajoči se rezultati.
Uporaba iskalne vrstice za iskanje ujemajočih se rezultatov
Zdaj, ko veste, kako ustvariti iskalno vrstico z izbiro nizov, lahko dodate več funkcij.
Svojim sidrnim oznakam lahko na primer dodate povezave, da odprete različne strani, odvisno od rezultata, ki ga uporabnik klikne. Iskalno vrstico lahko spremenite za iskanje po bolj zapletenih predmetih. Kodo lahko tudi spremenite za delo z okviri, kot je React.