Oma automaatse täitmise otsinguriba loomine on lihtsam kui arvate.
Otsinguriba on populaarne kasutajaliidese element, mida paljud kaasaegsed veebisaidid kasutavad. Kui loote saiti, mis sisaldab mis tahes tüüpi andmeid, võite soovida, et teie kasutajad saaksid otsida konkreetseid üksusi.
Otsinguriba saate luua mitmel viisil. Saate luua keerukaid otsinguribasid, mis annavad tulemusi mitme filtri (nt nime või kuupäeva) põhjal. Olemasolevad teegid aitavad teil otsinguriba juurutada ilma seda nullist üles ehitamata.
Siiski saate vanilje JavaScripti abil luua ka lihtsa otsinguriba, mis võrdleb kasutaja sisendit stringide loendiga.
Kuidas lisada otsinguriba kasutajaliidest
Teie veebisait peaks sisaldama sisestuskasti, et kasutajad saaksid sisestada teksti, mida nad soovivad otsida. Üks võimalus seda teha on kasutada sisendmärgendit ja kujundada see otsinguriba sarnaseks.
- Looge oma veebisaidi salvestamiseks kaust. Looge kaustas HTML-fail nimega index.html.
- Täitke oma fail HTML-dokumendi põhistruktuuriga. Kui te pole HTML-iga tuttav, on neid palju HTML-koodi näiteid, mida saate õppida et aidata teil kiirust üles saada.
<!doctype html>
<html lang="et-USA">
<pea>
<pealkiri>Otsinguriba</title>
</head>
<keha>
<div klass="konteiner">
<!-- Veebilehe sisu läheb siia-->
</div>
</body>
</html> - Lisage konteineriklassi div sisestusmärgend. See võimaldab kasutajal sisestada teksti, mida ta soovib otsida. Iga kord, kui nad sisestavad uue tähemärgi, kutsub teie veebisait otsingu () funktsiooni. Selle funktsiooni loote hilisemates etappides.
Automaatse täitmise atribuut tagab, et brauser ei lisa varasemate otsinguterminite põhjal oma rippmenüüd.<div klass="konteiner">
<h2>Otsi riike</h2>
<sisendi id="otsinguriba" automaatne täitmine="väljas" onkeyup="otsing()" tüüp="tekst"
nimi ="otsing" kohatäide="Mida sa otsid?">
</div> - Sinuga samas kaustas index.html faili, looge uus CSS-fail nimega stiilid.css.
- Täitke fail üldise veebilehe ja otsinguriba stiiliga:
keha {
marginaal: 0;
polsterdus: 0;
taustavärv: #f7f7f7;
}
* {
font-perekond: "Arial", sans-serif;
}
.konteiner {
polster: 100px 25%;
ekraan: flex;
paindesuund: veerg;
joone kõrgus: 2rem;
fondi suurus: 1.2em;
värv: #202C39;
}
#otsinguriba {
polster: 15px;
piiri raadius: 5 pikslit;
}
sisend[tüüp=tekst] {
-veebikomplekti üleminek: laius 0.15skergus sisse-välja;
üleminek: laius 0.15skergus sisse-välja;
} - sisse index.html, lisage oma CSS-faili link head-märgendi sisse ja pealkirja märgendi alla:
<link rel="stiilileht" href="stiilid.css"> - Ava index.html faili veebibrauseris ja vaadake oma otsinguriba kasutajaliidest.
Kuidas luua otsinguriba jaoks loendi stringe
Enne kui kasutaja saab otsida, peate looma loendi saadaolevatest üksustest, mida nad saavad otsida. Seda saate teha stringide massiivi abil. String on üks paljudest andmetüübid, mida saate JavaScriptis kasutadaja võib esindada tähemärkide jada.
Saate selle loendi dünaamiliselt luua JavaScripti abil lehe laadimise ajal.
- Sees index.html, lisage sisendmärgendi alla div. See div kuvab rippmenüü, mis sisaldab loendit üksustest, mis vastavad kasutaja otsitavale:
<div id="nimekirja"></div> - Sinuga samas kaustas index.html fail ja stiilid.css faili, looge uus fail nimega script.js.
- Sees script.js, looge uus funktsioon nimega loadSearchData(). Funktsiooni sees lähtestage massiiv stringide loendiga. Pidage meeles, et see on väike staatiline loend. Keerulisem teostus peab arvestama suuremate andmekogumite kaudu otsimisega.
funktsiooniloadSearchData() {
// Otsinguribal kasutatavad andmed
lase riigid = [
'Austraalia',
'Austria',
'Brasiilia',
'Kanada',
'Taani',
'Egiptus',
'Prantsusmaa',
'Saksamaa',
'USA',
'Vietnam'
];
} - Hankige failis loadSearchData() ja uue massiivi all element div, mis kuvab kasutajale vastavad otsinguüksused. Lisage loendi divisse ankrumärgend iga loendi andmeüksuse jaoks:
// Hankige loendi HTML-element
lase nimekiri = dokument.getElementById('loend');
// Lisage iga andmeüksus an-na tag
riigid.igaühele((riik)=>{
lase a = dokument.createElement("a");
a.innerText = riik;
a.classList.add("listItem");
nimekirja.appendChild (a);
}) - In body tag of index.html, lisage laadimissündmuse atribuut uue funktsiooni loadSearchData() kutsumiseks. See laadib andmed lehe laadimise ajal.
<keha laadimine="loadSearchData()"> - sisse index.html, lisage enne body-märgendi lõppu JavaScripti faili linkimiseks skriptimärgend:
<keha laadimine="loadSearchData()">
<!-- Teie veebilehe sisu -->
<skript src="script.js"></script>
</body> - sisse stiilid.css, lisage ripploendisse stiil:
#list {
ääris: 1px ühtlane helehall;
piiri raadius: 5 pikslit;
kuva: plokk;
}
.listItem {
ekraan: flex;
paindesuund: veerg;
tekst-kaunistus: puudub;
polsterdus: 5px 20px;
värv: must;
}
.listItem:hõljuma {
taustavärv: helehall;
} - Avatud index.html veebibrauseris, et vaadata oma otsinguriba ja saadaolevate otsingutulemuste loendit. Otsingufunktsioon veel ei tööta, kuid peaksite nägema kasutajaliidest, mida see kasutab:
Kuidas luua otsinguribal sobivate tulemustega rippmenüüd
Nüüd, kui teil on otsinguriba ja stringide loend, mida kasutajad saavad otsida, saate lisada otsingufunktsiooni. Kui kasutaja sisestab otsinguribale, kuvatakse ainult teatud loendi üksused.
- sisse stiilid.css, asendage loendi stiil, et loend vaikimisi peita:
#list {
ääris: 1px ühtlane helehall;
piiri raadius: 5 pikslit;
kuva: puudub;
} - sisse script.js, looge uus funktsioon nimega search(). Pidage meeles, et programm kutsub seda funktsiooni iga kord, kui kasutaja sisestab otsinguribale märgi või eemaldab selle sealt. Mõned rakendused vajavad teabe toomiseks väljasõitu serverisse. Sellistel juhtudel võib see rakendus teie kasutajaliidest aeglustada. Selle arvessevõtmiseks peate võib-olla rakendust muutma.
funktsiooniotsing() {
// otsingufunktsioon läheb siia
} - Funktsioonis search() hankige loendi jaoks element HTML div. Hankige ka iga loendis oleva üksuse HTML-ankurmärgendi elemendid:
lase listContainer = dokument.getElementById('loend');
lase listItems = dokument.getElementsByClassName('listItem'); - Hankige kasutaja poolt otsinguribale sisestatud sisend:
lase sisend = dokument.getElementById('otsinguriba').väärtus
input = input.to LowerCase(); - Võrrelge kasutaja sisendit loendi iga üksusega. Näiteks kui kasutaja sisestab "a", võrdleb funktsioon, kas "a" on "Austraalia", siis "Austria", "Brasiilia", "Kanada" ja nii edasi. Kui see sobib, kuvatakse see üksus loendis. Kui see ei ühti, peidab see selle üksuse.
lase noResults = tõsi;
jaoks (i = 0; i < listItems.length; i++) {
if (!listItems[i].innerHTML.toLowerCase().includes (input) || sisend "") {
listItems[i].style.display="mitte ühtegi";
jätka;
}
muidu {
listItems[i].style.display="painduv";
noResults = vale;
}
} - Kui loendis pole tulemusi, peitke loend täielikult:
listContainer.style.display = Kas tulemusi pole? "mitte ühtegi": "blokk"; - Klõpsake nuppu index.html faili, et see veebibrauseris avada.
- Alustage otsinguribale tippimist. Sisestamise ajal värskendatakse tulemuste loendit, et kuvada ainult vastavad tulemused.
Otsinguriba kasutamine sobivate tulemuste otsimiseks
Nüüd, kui teate, kuidas luua stringivalikuga otsinguriba, saate lisada rohkem funktsioone.
Näiteks saate lisada linke oma ankrumärgenditele, et avada erinevaid lehti, olenevalt tulemusest, millel kasutaja klõpsab. Keerulisemate objektide otsimiseks saate muuta otsinguriba. Samuti saate koodi muuta, et see töötaks selliste raamistikega nagu React.
