Crearea propriei bare de căutare cu completare automată este mai ușor decât credeți.
O bară de căutare este un element popular de interfață pe care îl folosesc multe site-uri web moderne. Dacă construiți un site care conține orice tip de date, poate doriți ca utilizatorii să poată căuta anumite elemente.
Există multe moduri în care puteți construi o bară de căutare. Puteți crea bare de căutare complexe care returnează rezultate pe baza mai multor filtre, cum ar fi un nume sau o dată. Bibliotecile existente vă pot ajuta să implementați o bară de căutare fără a o construi de la zero.
Cu toate acestea, puteți crea și o bară de căutare simplă folosind JavaScript vanilla, care compară intrarea unui utilizator cu o listă de șiruri.
Cum să adăugați interfața de utilizare pentru bara de căutare
Site-ul dvs. ar trebui să includă o casetă de introducere pentru ca utilizatorii să introducă textul pe care doresc să îl caute. O modalitate de a face acest lucru este să utilizați o etichetă de intrare și să o stilați astfel încât să arate ca o bară de căutare.
- Creați un folder pentru a vă stoca site-ul web. În interiorul folderului, creați un fișier HTML numit index.html.
- Completați fișierul cu structura de bază a unui document HTML. Dacă nu sunteți familiarizat cu HTML, există multe Exemple de cod HTML pe care le puteți învăța să te ajute să ajungi la viteză.
<!doctype html>
<html lang="ro-SUA">
<cap>
<titlu>Bara de căutare</title>
</head>
<corp>
<div class="recipient">
<!-- Conținutul paginii web ajunge aici-->
</div>
</body>
</html> - În interiorul clasei container div, adăugați o etichetă de intrare. Acest lucru va permite utilizatorului să introducă textul pe care ar dori să îl caute. Ori de câte ori introduc un caracter nou, site-ul dvs. va apela funcția de căutare(). Veți crea această funcție în pașii ulterioare.
Atributul de completare automată asigură că un browser nu își va adăuga propriul meniu derulant bazat pe termenii de căutare anteriori.<div class="recipient">
<h2>Căutați țări</h2>
<ID de intrare ="bara de căutare" autocompletare="oprit" onkeyup="căutare()" tip="text"
nume="căutare" substituent="Ce căutați?">
</div> - În același folder ca dvs index.html fișier, creați un nou fișier CSS numit stiluri.css.
- Completați fișierul cu stilul pentru întreaga pagină web și bara de căutare:
corp {
marja: 0;
umplutură: 0;
culoare de fundal: #f7f7f7;
}
* {
familie de fonturi: "Arial", sans-serif;
}
.container {
umplutură: 100px 25%;
display: flex;
flex-direcție: coloană;
linie-inaltime: 2rem;
marimea fontului: 1.2em;
culoare: #202C39;
}
#bara de căutare {
umplutură: 15px;
chenar-rază: 5px;
}
intrare[tip=text] {
-webkit-tranziție: lăţime 0.15sușurință-in-out;
tranziție: lăţime 0.15sușurință-in-out;
} - În index.html, adăugați un link către fișierul dvs. CSS în interiorul etichetei head și sub eticheta titlu:
<link rel="foaia de stil" href="stiluri.css"> - Deschide index.html fișier într-un browser web și vizualizați interfața de utilizare a barei de căutare.
Cum se creează șirurile de listă pentru bara de căutare
Înainte ca utilizatorul să poată căuta, va trebui să creați o listă de articole disponibile pe care le poate căuta. Puteți face acest lucru cu o serie de șiruri. O sfoară este una dintre multe tipuri de date pe care le puteți utiliza în JavaScript, și poate reprezenta o secvență de caractere.
Puteți crea dinamic această listă folosind JavaScript, deoarece pagina se încarcă.
- Interior index.html, sub eticheta de intrare, adăugați un div. Acest div va afișa un meniu derulant care va conține o listă de articole care se potrivesc cu ceea ce caută utilizatorul:
<div id="listă"></div> - În același folder ca dvs index.html dosar și stiluri.css fișier, creați un fișier nou numit script.js.
- Interior script.js, creați o nouă funcție numită loadSearchData(). În interiorul funcției, inițializați o matrice cu o listă de șiruri. Rețineți că aceasta este o mică listă statică. O implementare mai complexă va trebui să ia în considerare căutarea prin seturi de date mai mari.
funcţieloadSearchData() {
// Date care vor fi folosite în bara de căutare
lăsa țări = [
'Australia',
'Austria',
'Brazilia',
'Canada',
'Danemarca',
'Egipt',
'Franţa',
'Germania',
'STATELE UNITE ALE AMERICII',
'Vietnam'
];
} - În interiorul loadSearchData() și sub noua matrice, obțineți elementul div care va afișa utilizatorului elementele de căutare potrivite. În interiorul div-ului listei, adăugați o etichetă de ancorare pentru fiecare element de date din listă:
// Obține elementul HTML al listei
lăsa lista = document.getElementById('listă');
// Adăugați fiecare element de date ca un etichetă
ţări.pentru fiecare((țara)=>{
lăsa a = document.createElement("a");
a.innerText = tara;
a.classList.add("listItem");
listă.appendChild (a);
}) - În eticheta corporală a index.html, adăugați atributul evenimentului onload pentru a apela noua funcție loadSearchData(). Aceasta va încărca datele pe măsură ce pagina se încarcă.
<încărcare corporală="loadSearchData()"> - În index.html, înainte ca eticheta body să se încheie, adăugați o etichetă de script pentru a face legătura la fișierul JavaScript:
<încărcare corporală="loadSearchData()">
<!-- Conținutul paginii dvs. web -->
<script src="script.js"></script>
</body> - În stiluri.css, adăugați un stil la lista derulantă:
#list {
chenar: 1px gri deschis continuu;
chenar-rază: 5px;
afisare: bloc;
}
.listItem {
display: flex;
flex-direcție: coloană;
text-decor: niciuna;
umplutură: 5px 20px;
culoarea neagra;
}
.listItem:planare {
culoare de fundal: gri deschis;
} - Deschis index.html într-un browser web pentru a vizualiza bara de căutare și lista rezultatelor căutării disponibile. Funcționalitatea de căutare nu funcționează încă, dar ar trebui să vedeți interfața de utilizare pe care o va folosi:
Cum să creați meniul derulant cu rezultate potrivite în bara de căutare
Acum că aveți o bară de căutare și o listă de șiruri pe care utilizatorii să le caute, puteți adăuga funcționalitatea de căutare. Pe măsură ce utilizatorul scrie în bara de căutare, se vor afișa numai anumite elemente din listă.
- În stiluri.css, înlocuiți stilul pentru listă pentru a ascunde lista în mod implicit:
#list {
chenar: 1px gri deschis continuu;
chenar-rază: 5px;
afișaj: niciunul;
} - În script.js, creați o nouă funcție numită search(). Rețineți că programul va apela această funcție de fiecare dată când utilizatorul introduce sau șterge un caracter din bara de căutare. Unele aplicații vor avea nevoie de călătorii la un server pentru a prelua informații. În astfel de cazuri, această implementare ar putea încetini interfața de utilizare. Poate fi necesar să modificați implementarea pentru a ține cont de acest lucru.
funcţiecăutare() {
// Funcționalitatea de căutare merge aici
} - În interiorul funcției search(), obțineți elementul HTML div pentru listă. Obțineți, de asemenea, elementele etichetei de ancorare HTML ale fiecărui element din listă:
lăsa listContainer = document.getElementById('listă');
lăsa listItems = document.getElementsByClassName('listItem'); - Obțineți intrarea introdusă de utilizator în bara de căutare:
lăsa intrare = document.getElementById('bara de căutare').value
input = input.toLowerCase(); - Comparați intrarea utilizatorului cu fiecare element din listă. De exemplu, dacă utilizatorul introduce „a”, funcția va compara dacă „a” este în „Australia”, apoi „Austria”, „Brazilia”, „Canada” și așa mai departe. Dacă se potrivește, va afișa acel element în listă. Dacă nu se potrivește, va ascunde acel element.
lăsa noResults = Adevărat;
pentru (i = 0; i < listItems.lungime; i++) {
if (!listItems[i].innerHTML.toLowerCase().includes (input) || input "") {
listItems[i].style.display="nici unul";
continua;
}
altfel {
listItems[i].style.display="contracta";
noResults = fals;
}
} - Dacă nu există niciun rezultat în listă, ascundeți lista complet:
listContainer.style.display = noResults? "nici unul": "bloc"; - Faceți clic pe index.html fișier pentru a-l deschide într-un browser web.
- Începeți să tastați în bara de căutare. Pe măsură ce tastați, lista de rezultate se va actualiza pentru a afișa numai rezultatele care se potrivesc.
Utilizarea unei bare de căutare pentru a căuta rezultate potrivite
Acum că știți cum să creați o bară de căutare cu selecție de șiruri, puteți adăuga mai multe funcționalități.
De exemplu, puteți adăuga link-uri la etichetele de ancorare pentru a deschide pagini diferite, în funcție de rezultatul pe care îl face clic pe utilizator. Puteți schimba bara de căutare pentru a căuta prin obiecte mai complexe. De asemenea, puteți modifica codul pentru a lucra cu cadre precum React.