Costruire la tua barra di ricerca con completamento automatico è più facile di quanto pensi.
Una barra di ricerca è un popolare elemento dell'interfaccia utente utilizzato da molti siti Web moderni. Se stai costruendo un sito che contiene qualsiasi tipo di dati, potresti volere che i tuoi utenti siano in grado di cercare elementi specifici.
Esistono molti modi per creare una barra di ricerca. Puoi creare barre di ricerca complesse che restituiscono risultati basati su più filtri, ad esempio un nome o una data. Le librerie esistenti possono aiutarti a implementare una barra di ricerca senza crearla da zero.
Tuttavia, puoi anche creare una semplice barra di ricerca utilizzando JavaScript vanilla, che confronta l'input di un utente con un elenco di stringhe.
Come aggiungere l'interfaccia utente per la barra di ricerca
Il tuo sito web dovrebbe includere una casella di input per consentire agli utenti di inserire il testo che desiderano cercare. Un modo per farlo è utilizzare un tag di input e modellarlo in modo che assomigli a una barra di ricerca.
- Crea una cartella per memorizzare il tuo sito web. All'interno della cartella, crea un file HTML denominato indice.html.
- Compila il tuo file con la struttura di base di un documento HTML. Se non hai familiarità con l'HTML, ce ne sono molti Esempi di codice HTML che puoi imparare per aiutarti a metterti al passo.
<!doctype html>
<html lang="en-US">
<Testa>
<titolo>Barra di ricerca</title>
</head>
<corpo>
<classe div="contenitore">
<!-- Il contenuto della pagina web va qui-->
</div>
</body>
</html> - All'interno del div della classe contenitore, aggiungi un tag di input. Ciò consentirà all'utente di digitare il testo che desidera cercare. Ogni volta che inseriscono un nuovo carattere, il tuo sito web chiamerà la funzione search(). Creerai questa funzione nei passaggi successivi.
L'attributo di completamento automatico garantisce che un browser non aggiunga il proprio menu a discesa in base ai termini di ricerca precedenti.<classe div="contenitore">
<h2>Cerca Paesi</h2>
<id ingresso="barra di ricerca" completamento automatico="spento" onkeyup="ricerca()" tipo="testo"
nome="ricerca" segnaposto="Che cosa sta cercando?">
</div> - Nella stessa cartella del tuo indice.html file, crea un nuovo file CSS chiamato styles.css.
- Popola il file con lo stile per la pagina web complessiva e la barra di ricerca:
corpo {
margine: 0;
imbottitura: 0;
colore di sfondo: #f7f7f7;
}
* {
famiglia di font: "Aria", sans serif;
}
.contenitore {
imbottitura: 100px 25%;
display: flessibile;
direzione flessibile: colonna;
altezza linea: 2rem;
dimensione del font: 1.2em;
colore: #202C39;
}
#barra di ricerca {
imbottitura: 15px;
bordo-raggio: 5px;
}
ingresso[tipo=testo] {
-webkit-transizione: larghezza 0.15sfacilità d'ingresso;
transizione: larghezza 0.15sfacilità d'ingresso;
} - In indice.html, aggiungi un link al tuo file CSS all'interno del tag head e sotto il tag title:
<collegamento rel="foglio di stile" href="styles.css"> - Apri il indice.html file in un browser Web e visualizzare l'interfaccia utente della barra di ricerca.
Come creare le stringhe di elenco per la barra di ricerca
Prima che l'utente possa cercare, dovrai creare un elenco di elementi disponibili che possono cercare. Puoi farlo con un array di stringhe. Una stringa è una delle tante tipi di dati che puoi utilizzare in JavaScripte può rappresentare una sequenza di caratteri.
Puoi creare dinamicamente questo elenco utilizzando JavaScript, mentre la pagina si sta caricando.
- Dentro indice.html, sotto il tag input, aggiungi un div. Questo div visualizzerà un menu a discesa che conterrà un elenco di elementi che corrispondono a ciò che l'utente sta cercando:
<id div="elenco"></div> - Nella stessa cartella del tuo indice.html file e styles.css file, crea un nuovo file chiamato script.js.
- Dentro script.js, crea una nuova funzione chiamata loadSearchData(). All'interno della funzione, inizializza un array con un elenco di stringhe. Tieni presente che questo è un piccolo elenco statico. Un'implementazione più complessa dovrà tenere conto della ricerca in set di dati più grandi.
funzioneloadSearchData() {
// Dati da utilizzare nella barra di ricerca
permettere paesi = [
'Australia',
'Austria',
'Brasile',
'Canada',
'Danimarca',
'Egitto',
'Francia',
'Germania',
'Stati Uniti d'America',
'Vietnam'
];
} - All'interno di loadSearchData() e sotto il nuovo array, ottieni l'elemento div che mostrerà all'utente gli elementi di ricerca corrispondenti. All'interno dell'elenco div, aggiungi un tag di ancoraggio per ogni elemento di dati nell'elenco:
// Ottiene l'elemento HTML dell'elenco
permettere lista = documento.getElementById('lista');
// Aggiunge ogni elemento di dati come un etichetta
Paesi.per ciascuno((paese)=>{
permettere un = documento.createElement("a");
a.innerText = paese;
a.classList.add("listItem");
elenco.appendChild (a);
}) - Nel tag del corpo di indice.html, aggiungi l'attributo dell'evento onload per chiamare la nuova funzione loadSearchData(). Questo caricherà i dati durante il caricamento della pagina.
<caricamento del corpo="caricaDatiRicerca()"> - In indice.html, prima che il tag body termini, aggiungi un tag script da collegare al tuo file JavaScript:
<caricamento del corpo="caricaDatiRicerca()">
<!-- Il contenuto della tua pagina web -->
<script src="script.js"></script>
</body> - In styles.css, aggiungi uno stile all'elenco a discesa:
#elenco {
bordo: 1px solido grigio chiaro;
bordo-raggio: 5px;
blocco di visualizzazione;
}
.listItem {
display: flessibile;
direzione flessibile: colonna;
decorazione del testo: nessuna;
imbottitura: 5px 20px;
colore nero;
}
.listItem: al passaggio del mouse {
colore di sfondo: grigio chiaro;
} - Aprire indice.html in un browser Web per visualizzare la barra di ricerca e l'elenco dei risultati di ricerca disponibili. La funzionalità di ricerca non funziona ancora, ma dovresti vedere l'interfaccia utente che utilizzerà:
Come creare il menu a discesa con risultati corrispondenti all'interno della barra di ricerca
Ora che hai una barra di ricerca e un elenco di stringhe che gli utenti possono cercare, puoi aggiungere la funzionalità di ricerca. Mentre l'utente digita nella barra di ricerca, verranno visualizzati solo alcuni elementi nell'elenco.
- In styles.css, sostituisci lo stile dell'elenco per nascondere l'elenco per impostazione predefinita:
#elenco {
bordo: 1px solido grigio chiaro;
bordo-raggio: 5px;
display: nessuno;
} - In script.js, crea una nuova funzione chiamata search(). Tieni presente che il programma chiamerà questa funzione ogni volta che l'utente inserisce o rimuove un carattere dalla barra di ricerca. Alcune applicazioni avranno bisogno di viaggi su un server per recuperare informazioni. In tali casi, questa implementazione potrebbe rallentare l'interfaccia utente. Potrebbe essere necessario modificare l'implementazione per tenerne conto.
funzionericerca() {
// la funzionalità di ricerca va qui
} - All'interno della funzione search(), ottieni l'elemento div HTML per l'elenco. Ottieni anche gli elementi del tag di ancoraggio HTML di ciascun elemento all'interno dell'elenco:
permettere elencoContenitore = documento.getElementById('lista');
permettere listItem = documento.getElementsByClassName('listItem'); - Ottieni l'input che l'utente ha inserito nella barra di ricerca:
permettere ingresso = documento.getElementById('searchbar').valore
input = input.toLowerCase(); - Confronta l'input dell'utente con ogni elemento dell'elenco. Ad esempio, se l'utente immette "a", la funzione confronterà se "a" si trova all'interno di "Australia", quindi "Austria", "Brasile", "Canada" e così via. Se corrisponde, visualizzerà quell'elemento nell'elenco. Se non corrisponde, nasconderà quell'elemento.
permettere nessun risultato = VERO;
per (io = 0; io < listItems.length; i++) {
if (!listItems[i].innerHTML.toLowerCase().includes (input) || input "") {
listItems[i].style.display="nessuno";
Continua;
}
altro {
listItems[i].style.display="flettere";
nessun risultato = falso;
}
} - Se non ci sono risultati nell'elenco, nascondi completamente l'elenco:
listContainer.style.display = noResults? "nessuno": "bloccare"; - Clicca sul indice.html file per aprirlo in un browser web.
- Inizia a digitare nella barra di ricerca. Durante la digitazione, l'elenco dei risultati si aggiornerà per visualizzare solo i risultati corrispondenti.
Utilizzo di una barra di ricerca per cercare risultati corrispondenti
Ora che sai come creare una barra di ricerca con selezione di stringhe, puoi aggiungere ulteriori funzionalità.
Ad esempio, puoi aggiungere collegamenti ai tag di ancoraggio per aprire pagine diverse a seconda del risultato su cui l'utente fa clic. Puoi modificare la barra di ricerca per cercare tra oggetti più complessi. Puoi anche modificare il codice in modo che funzioni con framework come React.
