Sukurti savo automatinio užbaigimo paieškos juostą yra lengviau, nei manote.
Paieškos juosta yra populiarus vartotojo sąsajos elementas, kurį naudoja daugelis šiuolaikinių svetainių. Jei kuriate svetainę, kurioje yra bet kokio tipo duomenų, galbūt norėsite, kad naudotojai galėtų ieškoti konkrečių elementų.
Yra daug būdų, kaip sukurti paieškos juostą. Galite sukurti sudėtingas paieškos juostas, kurios pateikia rezultatus pagal kelis filtrus, pvz., pavadinimą ar datą. Esamos bibliotekos gali padėti įdiegti paieškos juostą nekuriant jos nuo nulio.
Tačiau taip pat galite sukurti paprastą paieškos juostą naudodami „vanilla JavaScript“, kuri palygina vartotojo įvestį su eilučių sąrašu.
Kaip pridėti paieškos juostos vartotojo sąsają
Jūsų svetainėje turi būti įvesties laukelis, kuriame naudotojai galėtų įvesti tekstą, kurio jie nori ieškoti. Vienas iš būdų tai padaryti yra naudoti įvesties žymą ir formuoti ją taip, kad ji atrodytų kaip paieškos juosta.
- Sukurkite aplanką savo svetainei saugoti. Aplanke sukurkite HTML failą pavadinimu index.html.
- Užpildykite failą pagrindine HTML dokumento struktūra. Jei nesate susipažinę su HTML, jų yra daug HTML kodo pavyzdžiai, kuriuos galite išmokti kad padėtų jums įsibėgėti.
<!doctype html>
<html lang="en-US">
<galva>
<titulą>Paieškos juosta</title>
</head>
<kūnas>
<div klasė ="konteineris">
<!-- Tinklalapio turinys patenka čia-->
</div>
</body>
</html> - Sudėtinio rodinio klasės div viduje pridėkite įvesties žymą. Tai leis vartotojui įvesti tekstą, kurio jis norėtų ieškoti. Kai jie įveda naują simbolį, jūsų svetainė iškvies paieškos () funkciją. Šią funkciją sukursite vėlesniais veiksmais.
Automatinio užbaigimo atributas užtikrina, kad naršyklė nepridės savo išskleidžiamojo meniu pagal ankstesnius paieškos terminus.<div klasė ="konteineris">
<h2>Ieškoti šalių</h2>
<įvesties id="paieškos juosta" automatinis užbaigimas ="išjungti" onkeyup="Paieška()" tipas ="tekstą"
vardas ="Paieška" vietos rezervuaras="Ko tu ieškai?">
</div> - Tame pačiame aplanke kaip ir jūsų index.html failą, sukurkite naują CSS failą pavadinimu stiliai.css.
- Užpildykite failą viso tinklalapio ir paieškos juostos stiliumi:
kūnas {
paraštė: 0;
paminkštinimas: 0;
fono spalva: #f7f7f7;
}
* {
šrifto šeima: "Arial", sans-serif;
}
.konteineris {
paminkštinimas: 100px 25%;
ekranas: lankstus;
lankstumo kryptis: stulpelis;
linijos aukštis: 2rem;
šrifto dydis: 1.2em;
spalva: #202C39;
}
#searchbar {
pamušalas: 15px;
kraštinės spindulys: 5 pikseliai;
}
įvestis[tipas=tekstas] {
-Webkit-transition: plotis 0.15slengvumas į išorę;
perėjimas: plotis 0.15slengvumas į išorę;
} - Į index.html, pridėkite nuorodą į savo CSS failą, esantį ant galvos ir po pavadinimo žyma:
<nuoroda rel="stiliaus lapas" href="stiliai.css"> - Atidaryk index.html failą žiniatinklio naršyklėje ir peržiūrėkite paieškos juostos vartotojo sąsają.
Kaip sukurti paieškos juostos sąrašo eilutes
Kad vartotojas galėtų ieškoti, turėsite sudaryti galimų elementų, kurių jie gali ieškoti, sąrašą. Tai galite padaryti naudodami daugybę eilučių. Styga yra viena iš daugelio duomenų tipus, kuriuos galite naudoti „JavaScript“.ir gali reikšti simbolių seką.
Galite dinamiškai sukurti šį sąrašą naudodami JavaScript, kai puslapis įkeliamas.
- Viduje index.html, po įvesties žyma pridėkite div. Šiame skyrelyje bus rodomas išskleidžiamasis meniu, kuriame bus elementų, atitinkančių tai, ko vartotojas ieško, sąrašas:
<div id="sąrašą"></div> - Tame pačiame aplanke kaip ir jūsų index.html failas ir stiliai.css failą, sukurkite naują failą pavadinimu script.js.
- Viduje script.js, sukurkite naują funkciją pavadinimu loadSearchData(). Funkcijos viduje inicijuokite masyvą su eilučių sąrašu. Atminkite, kad tai yra mažas statinis sąrašas. Sudėtingesnis diegimas turės atsižvelgti į paiešką didesniuose duomenų rinkiniuose.
funkcijaloadSearchData() {
// Duomenys, kurie bus naudojami paieškos juostoje
leisti šalys = [
'Australija',
'Austrija',
'Brazilija',
'Kanada',
'Danija',
'Egiptas',
'Prancūzija',
'Vokietija',
'JAV',
'Vietnamas'
];
} - „loadSearchData()“ ir po nauju masyvu gaukite elementą „div“, kuris vartotojui parodys atitinkančius paieškos elementus. Sąrašo skyrelyje pridėkite prieraišo žymą kiekvienam sąrašo duomenų elementui:
// Gaukite sąrašo HTML elementą
leisti sąrašas = dokumentas.getElementById('list');
// Pridėkite kiekvieną duomenų elementą kaip an žyma
šalyse.kiekvienam((šalis)=>{
leisti a = dokumentas.createElement("a");
a.innerText = šalis;
a.classList.add("sąrašo elementas");
sąrašą.appendChild (a);
}) - Turinio žymoje index.html, pridėkite įkėlimo įvykio atributą, kad iškviestumėte naują funkciją loadSearchData(). Tai įkels duomenis, kai puslapis įkeliamas.
<kūno apkrova="loadSearchData()"> - Į index.html, prieš pasibaigiant turinio žymai pridėkite scenarijaus žymą, kad susietumėte su „JavaScript“ failu:
<kūno apkrova="loadSearchData()">
<!-- Jūsų tinklalapio turinys>
<scenarijus src="script.js"></script>
</body> - Į stiliai.css, pridėkite šiek tiek stiliaus į išskleidžiamąjį sąrašą:
#list {
kraštinė: 1px vientisa šviesiai pilka;
kraštinės spindulys: 5 pikseliai;
ekranas: blokas;
}
.listItem {
ekranas: lankstus;
lankstumo kryptis: stulpelis;
tekstas-dekoravimas: nėra;
paminkštinimas: 5px 20px;
spalva: juoda;
}
.listItem:užveskite pelės žymeklį {
fono spalva: šviesiai pilka;
} - Atviras index.html žiniatinklio naršyklėje, kad peržiūrėtumėte paieškos juostą ir galimų paieškos rezultatų sąrašą. Paieškos funkcija dar neveikia, bet turėtumėte pamatyti vartotojo sąsają, kurią ji naudos:
Kaip sukurti išskleidžiamąjį meniu su atitinkamais rezultatais paieškos juostoje
Dabar, kai turite paieškos juostą ir eilučių, kuriose vartotojai gali ieškoti, sąrašą, galite pridėti paieškos funkciją. Kai vartotojas įveda tekstą paieškos juostoje, bus rodomi tik tam tikri sąrašo elementai.
- Į stiliai.css, pakeiskite sąrašo stilių, kad paslėptumėte sąrašą pagal numatytuosius nustatymus:
#list {
kraštinė: 1px vientisa šviesiai pilka;
kraštinės spindulys: 5 pikseliai;
ekranas: nėra;
} - Į script.js, sukurkite naują funkciją pavadinimu search (). Atminkite, kad programa iškvies šią funkciją kiekvieną kartą, kai vartotojas įves arba pašalins simbolį iš paieškos juostos. Kai kurioms programoms reikės nueiti į serverį, kad gautų informaciją. Tokiais atvejais šis diegimas gali sulėtinti jūsų vartotojo sąsają. Gali tekti pakeisti diegimą, kad į tai būtų atsižvelgta.
funkcijaPaieška() {
// čia yra paieškos funkcija
} - Funkcijoje search() gaukite sąrašo HTML elementą div. Taip pat gaukite kiekvieno sąrašo elemento HTML inkaro žymos elementus:
leisti listContainer = dokumentas.getElementById('list');
leisti listItems = dokumentas.getElementsByClassName('listItem'); - Gaukite įvestį, kurią vartotojas įvedė paieškos juostoje:
leisti įvestis = dokumentas.getElementById('paieškos juosta').value
input = input.toLowerCase(); - Palyginkite vartotojo įvestą informaciją su kiekvienu sąrašo elementu. Pavyzdžiui, jei vartotojas įveda „a“, funkcija palygins, ar „a“ yra „Australijoje“, tada „Austrijoje“, „Brazilija“, „Kanadoje“ ir pan. Jei jis atitiks, jis parodys tą elementą sąraše. Jei jis nesutampa, jis paslėps tą elementą.
leisti noResults = tiesa;
už (i = 0; i < listItems.length; i++) {
if (!listItems[i].innerHTML.toLowerCase().includes (input) || įvestis "") {
listItems[i].style.display="nė vienas";
Tęsti;
}
Kitas {
listItems[i].style.display="lankstus";
noResults = klaidinga;
}
} - Jei sąraše rezultatų nėra, visiškai paslėpkite sąrašą:
listContainer.style.display = nėra rezultatų? "nė vienas": "blokas"; - Spustelėkite ant index.html failą, kad atidarytumėte jį žiniatinklio naršyklėje.
- Pradėkite rašyti į paieškos juostą. Įvedant tekstą rezultatų sąrašas bus atnaujintas, kad būtų rodomi tik atitinkantys rezultatai.
Paieškos juostos naudojimas ieškant atitinkančių rezultatų
Dabar, kai žinote, kaip sukurti paieškos juostą su eilučių pasirinkimu, galite pridėti daugiau funkcijų.
Pavyzdžiui, galite pridėti nuorodų prie savo prierašo žymų, kad atidarytumėte skirtingus puslapius, atsižvelgiant į naudotojo spustelėjusį rezultatą. Galite pakeisti paieškos juostą, kad galėtumėte ieškoti sudėtingesnių objektų. Taip pat galite modifikuoti kodą, kad jis veiktų su tokiomis sistemomis kaip „React“.
