Creare una Lista con Ricerca – Funzioni HTML&JS

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

Articoli recenti:

• Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
• Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
• Come Risolvere i Problemi di Connessione Bluetooth al PC
• Guida alla Cybersecurity: Come proteggerti da minacce informatiche
• Come Aggiungere un Dizionario su App Kindle