Nella seguente guida imparerai a programmare e integrare facilmente un elenco (o lista) HTML con uno strumento di ricerca istantaneo JavaScript integrato per cercare rapidamente le voci inserite tramite la digitazione dei caratteri.
In questa guida della nostra serie Funzioni HTML&JS, potrai imparare a creare, gestire e installare un sistema di ricerca istantanea per i tuoi elenchi HTML. Tutto questo verrà programmato con l’ausilio di JavaScript.
Se hai intenzione di integrare una barra di ricerca per le tue liste HTML, puoi facilmente seguire la procedura riportata in questo articolo e copiare il codice inserito.
Chiunque può estrarre e usare i codici presenti dalla guida, liberamente. Nota bene però, che devi avere un minimo di conoscenza HTML per capire la procedura, ed è anche preferibile avere conoscenze di base JavaScript. In qualunque caso non ti preoccupare, cercheremo di spiegare il più facilmente possibile la guida in modo che anche dei principianti riescano a comprenderla.
Se vuoi imparare a programmare e a realizzare siti web, segui i nostri corsi gratuiti JavaScript e HTML/CSS.
Lista HTML con ricerca interna JavaScript
Descrizione
Come puoi facilmente capire dal titolo, lo strumento che andremo a creare consiste in una barra di ricerca aggiunta ad una lista HTML, nella quale è possibile digitare caratteri e trovare corrispondenze. Il tutto avviene in maniera istantanea, ovvero, i risultati coerenti con la parola digitata verranno mostrati già dalla prima lettera. In caso di nessuna corrispondenza, il software non visualizzerà voci.
Per fare questo faremo uso di un elenco HTML (ordinato o no, non fa differenza), che abbiamo spiegato nel nostro corso HTML (clicca qui per leggere come creare una lista/elenco HTML) e non tratteremo qui.
Assieme all’elenco verrà integrata una barra di testo (con il tag “input“) nella quale digitare le parole da ricercare. Passando poi alla sua programmazione con JavaScript.
Esempio
Qui puoi trovare un esempio pratico del tool che andremo a programmare:
- Mario
- Alfredo
- Giorgio
- Dario
- Mara
- Davide
- Aldo
- Giuseppe
Codice
HTML
Per creare o integrare questo strumento di ricerca per liste e elenchi HTML, ti basterà seguire il codice riportato qui in basso.
Partiamo dall’HTML:
<input type="text" id="barra-ricerca" onkeyup="ricerca()" placeholder="Cerca">
<ul id="elenco">
<li>Mario</li>
<li>Alfredo</li>
<li>Giorgio</li>
<li>Dario</li>
<li>Mara</li>
<li>Davide</li>
<li>Aldo</li>
<li>Giuseppe</li>
</ul>
Attualmente questa è una lista di nomi. Puoi cambiare le voci e aggiungerne quante ne desideri attraverso il tag “li“. Puoi convertire la lista in una lista numerata/ordinata semplicemente cambiando il tag “ul” con “ol“.
Come puoi vedere, l’area di input di testo ha una funzione JavaScript chiamata “ricerca()“. Ora andremo a programmare proprio questa.
JavaScript
La funzione da programmare dovrà prelevare il valore digitato nell’area di input e cercare corrispondenze nell’elenco creato. La funzione la chiameremo “ricerca()” per semplificare anche l’integrazione e la personalizzazione da parte degli utenti.
function ricerca() {
var input;
var filtro;
var lista;
var voci;
var x;
var i;
var testo;
input = document.getElementById("barra-ricerca");
filtro = input.value.toUpperCase();
lista = document.getElementById("elenco");
voci = lista.getElementsByTagName("li");
for (i = 0; i < voci.length; i++) {
x = lista.getElementsByTagName("li")[i];
testo = x.textContent || x.innerText;
if (testo.toUpperCase().indexOf(filtro) > -1) {
voci[i].style.display = "";
} else {
voci[i].style.display = "none";
}
}
}
Se devi inserire il codice JavaScript in un documento HTML, ricordati di integrarlo nel tag <script>.
Le variabili in gioco sono molte, assicurati di non modificare i loro nomi per non imbatterti in errori e malfunzionamenti. Incolla il codice alla fine del documento HTML, in modo che venga caricato dopo l’elenco.
Se ne hai bisogno, puoi cambiare i nomi dei selettori “id” con quelli presenti nella tua pagina/sito. Altrimenti lasciali così come sono.
Elenchi multipli
In caso di elenchi multipli nel tuo sito, vogliamo proporti un’alternativa utile al precedente codice per semplificare e ottimizzare il codice JavaScript.
Il metodo è il medesimo di quello già visto prima, ma qui faremo uso dei parametri JavaScript delle funzioni.
<input type="text" id="barra-ricerca" onkeyup="ricerca('barra-ricerca', 'elenco')" placeholder="Cerca un nome">
<ul id="elenco">
<li>Mario</li>
<li>Alfredo</li>
<li>Giorgio</li>
<li>Dario</li>
<li>Mara</li>
<li>Davide</li>
<li>Aldo</li>
<li>Giuseppe</li>
</ul>
<script>
function ricerca(tab, lists) {
var input;
var filtro;
var lista;
var voci;
var x;
var i;
var testo;
input = document.getElementById(tab);
filtro = input.value.toUpperCase();
lista = document.getElementById(lists);
voci = lista.getElementsByTagName("li");
for (i = 0; i < voci.length; i++) {
x = lista.getElementsByTagName("li")[i];
testo = x.textContent || x.innerText;
if (testo.toUpperCase().indexOf(filtro) > -1) {
voci[i].style.display = "";
} else {
voci[i].style.display = "none";
}
}
}
</script>
Puoi notare nella prima riga di codice HTML la nostra funzione con i parametri personalizzati: onkeyup="ricerca('barra-ricerca', 'elenco')"
.
Se avessi una nuova lista e barra d ricerca, ti basterà cambiare il testo nelle parentesi tonde. Esempio: onkeyup="ricerca('barra-ricerca2', 'elenco2')"
.
Questo ti aiuterà nel caso avessi più liste e hai bisogno di differenti barre di ricerca, senza dover ripetere/copiare la stessa funzione.
Ricerca con pulsante
Un altro metodo alternativo di creare una lista HTML con una ricerca, è quello di usare un pulsante esterno, vicino all’area di testo. Al click di questo pulsante inizierà la ricerca, ma questa non avverrà istantaneamente come visto prima (si possono anche ottenere gli stessi risultati, ma non avrebbe senso l’uso di un pulsante).
Il codice è questo:
<input type="text" id="barra-ricerca" placeholder="Digita un nome">
<button onclick="ricerca()">Cerca</button>
<ul id="elenco">
<li>Mario</li>
<li>Alfredo</li>
<li>Giorgio</li>
<li>Dario</li>
<li>Mara</li>
<li>Davide</li>
<li>Aldo</li>
<li>Giuseppe</li>
</ul>
<script>
function ricerca() {
var input;
var filtro;
var lista;
var voci;
var x;
var i;
var testo;
input = document.getElementById("barra-ricerca");
filtro = input.value.toUpperCase();
lista = document.getElementById("elenco");
voci = lista.getElementsByTagName("li");
for (i = 0; i < voci.length; i++) {
x = lista.getElementsByTagName("li")[i];
testo = x.textContent || x.innerText;
if (testo.toUpperCase().indexOf(filtro) > -1) {
voci[i].style.display = "";
} else {
voci[i].style.display = "none";
}
}
}
</script>
Come puoi vedere è avvenuta una semplice modifica, anzi un’aggiunta al codice HTML in cui ora è presente un nuovo tag “button” con la funzione onclick="ricerca()"
.
Ti è piaciuto l’articolo? Faccelo sapere nei commenti!
Leggi anche: Creare un menu a comparsa – HTML&JS
Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!
Articoli recenti:
- Recensione In Fuga. Ciclo Le Cronache dell’Ultimo Druido di Kevin Hearne
- Recensione Fool Moon di Jim Butcher
- Recensione Storm Front di Jim Butcher
- Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
- Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
8 commenti su “Creare una Lista con Ricerca – Funzioni HTML&JS”
Salve,
Posso solo farvi i miei piu sinceri complimenti per quello che mettete fate “tanto di cappello” BRAVI BRAVI
Buongiorno, ho usato il vostro codice per la ricerca e funziona benissimo con una lista. Ma non per liste multiple. Nel mio caso ho una tabella con tre colonne e in ognuna una lista di nomi. Ma funziona solo nella prima colonna. Potete suggerirmi come fare? Grazie!!!
Chiedo scusa, funziona tutto, sbagliavo io a scrivere! Grazie per l’aiuto!!
Ottimo codice, funziona alla perfezione. Di grande aiuto! Ma in caso di una lunga lista di nomi da prendere da altro file, c’è il modo per non dover copiare un nome per volta? Grazie!!
Ciao Patrizia.
Forse può aiutarti questo articolo: Copiare il testo negli appunti da pulsante
Grazie mille! Ottimo suggerimento. Ho solo un piccolo problema. Sto usando il codice per elenchi multipli, in tabella a tre colonne e la ricerca funziona perfettamente ma la prima colonna non è allineata in alto….quindi la casella di ricerca viene visualizzata più in basso rispetto alle altre colonne…
E’ possibile, in una tabella a più colonne, avere il campo di ricerca non su ogni colonna ma uno per tutte?
Sarebbe il massimo!! Grazie!
graizie infinite, finalmente un programma completo che funziona, e spiegato benissimo….smack!