Izveidot savu automātiskās pabeigšanas meklēšanas joslu ir vieglāk, nekā jūs domājat.
Meklēšanas josla ir populārs lietotāja interfeisa elements, ko izmanto daudzas mūsdienu vietnes. Ja veidojat vietni, kurā ir ietverti jebkāda veida dati, iespējams, vēlēsities, lai lietotāji varētu meklēt konkrētus vienumus.
Ir daudz veidu, kā izveidot meklēšanas joslu. Varat izveidot sarežģītas meklēšanas joslas, kas atgriež rezultātus, pamatojoties uz vairākiem filtriem, piemēram, vārdu vai datumu. Esošās bibliotēkas var palīdzēt ieviest meklēšanas joslu, neveidojot to no jauna.
Tomēr varat arī izveidot vienkāršu meklēšanas joslu, izmantojot JavaScript JavaScript, kas salīdzina lietotāja ievadi ar virkņu sarakstu.
Kā pievienot lietotāja saskarni meklēšanas joslai
Jūsu vietnē ir jāiekļauj ievades lodziņš, kurā lietotāji var ievadīt tekstu, ko viņi vēlas meklēt. Viens veids, kā to izdarīt, ir izmantot ievades tagu un veidot to tā, lai tas izskatītos kā meklēšanas josla.
- Izveidojiet mapi savas vietnes glabāšanai. Mapē izveidojiet HTML failu ar nosaukumu index.html.
- Aizpildiet savu failu ar HTML dokumenta pamatstruktūru. Ja neesat pazīstams ar HTML, to ir daudz HTML koda piemēri, kurus varat uzzināt lai palīdzētu jums uzņemt ātrumu.
<!doctype html>
<html lang="lv-ASV">
<galvu>
<virsraksts>Meklēšanas josla</title>
</head>
<ķermeni>
<div klase="konteiners">
<!-- Tīmekļa lapas saturs tiek rādīts šeit-->
</div>
</body>
</html> - Konteinera klases div iekšpusē pievienojiet ievades tagu. Tas ļaus lietotājam ierakstīt tekstu, kuru viņš vēlas meklēt. Ikreiz, kad viņi ievadīs jaunu rakstzīmi, jūsu vietne izsauks meklēšanas () funkciju. Šo funkciju izveidosit turpmākajās darbībās.
Automātiskās pabeigšanas atribūts nodrošina, ka pārlūkprogramma nepievienos savu nolaižamo izvēlni, pamatojoties uz iepriekšējiem meklēšanas vienumiem.<div klase="konteiners">
<h2>Meklēt valstis</h2>
<ievades id="meklēšanas josla" automātiskā pabeigšana ="izslēgts" onkeyup="Meklēt()" tips="tekstu"
vārds ="Meklēt" vietturis="Ko tu meklē?">
</div> - Tajā pašā mapē kā jūsu index.html failu, izveidojiet jaunu CSS failu ar nosaukumu stili.css.
- Aizpildiet failu ar stilu visai tīmekļa lapai un meklēšanas joslai:
body {
piemale: 0;
polsterējums: 0;
fona krāsa: #f7f7f7;
}
* {
fontu ģimene: "Arial", sans serif;
}
.konteiners {
polsterējums: 100 pikseļi 25%;
displejs: flex;
flex-direction: kolonna;
līnijas augstums: 2rem;
fonta izmērs: 1.2em;
krāsa: #202C39;
}
#searchbar {
polsterējums: 15 pikseļi;
apmales rādiuss: 5 pikseļi;
}
ievade[tips=teksts] {
-Webkit-pāreja: platums 0.15svieglums iekšā-out;
pāreja: platums 0.15svieglums iekšā-out;
} - In index.html, pievienojiet saiti uz savu CSS failu head tagā un zem nosaukuma taga:
<saite rel="stila lapa" href="stili.css"> - Atveriet index.html failu tīmekļa pārlūkprogrammā un skatiet meklēšanas joslas lietotāja interfeisu.
Kā izveidot saraksta virknes meklēšanas joslai
Lai lietotājs varētu meklēt, jums būs jāizveido pieejamo vienumu saraksts, kurus viņš var meklēt. To var izdarīt, izmantojot virkņu masīvu. Stīga ir viena no daudzajām datu tipi, kurus varat izmantot JavaScript, un var attēlot rakstzīmju secību.
Lapas ielādes laikā varat dinamiski izveidot šo sarakstu, izmantojot JavaScript.
- Iekšā index.html, zem ievades taga pievienojiet div. Šis div parādīs nolaižamo izvēlni, kurā būs to vienumu saraksts, kas atbilst lietotāja meklētajam:
<div id="sarakstu"></div> - Tajā pašā mapē kā jūsu index.html failu un stili.css failu, izveidojiet jaunu failu ar nosaukumu script.js.
- Iekšā script.js, izveidojiet jaunu funkciju ar nosaukumu loadSearchData(). Funkcijas iekšpusē inicializējiet masīvu ar virkņu sarakstu. Ņemiet vērā, ka šis ir neliels statisks saraksts. Sarežģītākai ieviešanai būs jāņem vērā meklēšana lielākās datu kopās.
funkcijuloadSearchData() {
// Meklēšanas joslā izmantojamie dati
ļaut valstis = [
'Austrālija',
'Austrija',
'Brazīlija',
'Kanāda',
'Dānija',
'Ēģipte',
'Francija',
'Vācija',
'ASV',
'Vjetnama'
];
} - Iekšpusē loadSearchData() un zem jaunā masīva iegūstiet div elementu, kas lietotājam parādīs atbilstošos meklēšanas vienumus. Saraksta div daļā pievienojiet enkura tagu katram saraksta datu vienumam:
// Iegūstiet saraksta HTML elementu
ļaut saraksts = dokumentu.getElementById('saraksts');
// Pievienojiet katru datu vienumu kā an tagu
valstīm.katram((valsts)=>{
ļaut a = dokumentu.createElement("a");
a.innerText = valsts;
a.classList.add("listItem");
sarakstu.appendChild (a);
}) - Pamatteksta tagā index.html, pievienojiet ielādes notikuma atribūtu, lai izsauktu jauno funkciju loadSearchData(). Tas ielādēs datus lapas ielādes laikā.
<ķermeņa slodze="loadSearchData()"> - In index.html, pirms body tag beidzas, pievienojiet skripta tagu, lai izveidotu saiti uz JavaScript failu:
<ķermeņa slodze="loadSearchData()">
<!-- Jūsu tīmekļa lapas saturs -->
<skripts src="script.js"></script>
</body> - In stili.css, pievienojiet kādu stilu nolaižamajam sarakstam:
#list {
apmale: 1px vienkrāsains gaiši pelēks;
apmales rādiuss: 5 pikseļi;
displejs: bloks;
}
.listItem {
displejs: flex;
flex-direction: kolonna;
teksta noformējums: nav;
polsterējums: 5 pikseļi 20 pikseļi;
krāsa: melna;
}
.listItem:virziet kursoru {
fona krāsa: gaiši pelēka;
} - Atvērt index.html tīmekļa pārlūkprogrammā, lai skatītu savu meklēšanas joslu un pieejamo meklēšanas rezultātu sarakstu. Meklēšanas funkcionalitāte vēl nedarbojas, taču jums vajadzētu redzēt lietotāja interfeisu, ko tā izmantos:
Kā izveidot nolaižamo izvēlni ar atbilstošiem rezultātiem meklēšanas joslā
Tagad, kad jums ir meklēšanas josla un virkņu saraksts, ko lietotāji var meklēt, varat pievienot meklēšanas funkcionalitāti. Kad lietotājs ieraksta meklēšanas joslā, tiks parādīti tikai daži saraksta vienumi.
- In stili.css, nomainiet saraksta stilu, lai pēc noklusējuma paslēptu sarakstu:
#list {
apmale: 1px vienkrāsains gaiši pelēks;
apmales rādiuss: 5 pikseļi;
displejs: nav;
} - In script.js, izveidojiet jaunu funkciju ar nosaukumu search (). Ņemiet vērā, ka programma izsauks šo funkciju ikreiz, kad lietotājs meklēšanas joslā ievadīs vai noņem rakstzīmi. Lai iegūtu informāciju, dažām lietojumprogrammām būs jābrauc uz serveri. Šādos gadījumos šī ieviešana var palēnināt jūsu lietotāja interfeisu. Lai to ņemtu vērā, iespējams, būs jāmaina ieviešana.
funkcijuMeklēt() {
// šeit ir pieejama meklēšanas funkcionalitāte
} - Funkcijā search () iegūstiet saraksta HTML div elementu. Iegūstiet arī katra saraksta vienuma HTML enkura tagu elementus:
ļaut listContainer = dokumentu.getElementById('saraksts');
ļaut listItems = dokumentu.getElementsByClassName('listItem'); - Iegūstiet ievadi, ko lietotājs ievadīja meklēšanas joslā:
ļaut ievade = dokumentu.getElementById('meklēšanas josla').vērtība
ievade = input.toLowerCase(); - Salīdziniet lietotāja ievadīto informāciju ar katru saraksta vienumu. Piemēram, ja lietotājs ievada "a", funkcija salīdzinās, ja "a" ir iekšā "Austrālija", tad "Austrija", "Brazīlija", "Kanāda" un tā tālāk. Ja tas atbilst, tas parādīs šo vienumu sarakstā. Ja tas neatbilst, tas paslēps šo vienumu.
ļaut noResults = taisnība;
par (i = 0; i < listItems.length; i++) {
if (!listItems[i].innerHTML.toLowerCase().includes (input) || ievade "") {
listItems[i].style.display="neviens";
Turpināt;
}
cits {
listItems[i].style.display="flex";
noResults = viltus;
}
} - Ja sarakstā rezultātu nav vispār, paslēpiet sarakstu pilnībā:
listContainer.style.display = nav rezultātu? "neviens": "bloķēt"; - Noklikšķiniet uz index.html failu, lai to atvērtu tīmekļa pārlūkprogrammā.
- Sāciet rakstīt meklēšanas joslā. Rakstīšanas laikā rezultātu saraksts tiks atjaunināts, lai tiktu rādīti tikai atbilstošie rezultāti.
Meklēšanas joslas izmantošana, lai meklētu atbilstošus rezultātus
Tagad, kad zināt, kā izveidot meklēšanas joslu ar virkņu atlasi, varat pievienot papildu funkcionalitāti.
Piemēram, varat pievienot saites saviem enkura tagiem, lai atvērtu dažādas lapas atkarībā no rezultāta, uz kura lietotājs noklikšķina. Varat mainīt meklēšanas joslu, lai meklētu sarežģītākos objektos. Varat arī modificēt kodu, lai tas darbotos ar tādiem ietvariem kā React.
