Cercare e filtrare risultati

Permettere all’utente di vedere solo una parte dei dati.

In parole semplici

Quando la lista cresce, serve cercare o filtrare. Il filtro non deve cancellare i dati originali: deve solo decidere cosa mostrare.

Questa lezione fa parte del modulo Progetto finale guidato. L’obiettivo del modulo è: Costruire una mini app semplice, pubblicarla e saper spiegare le scelte principali.

Parole nuove

filtro: regola che decide quali elementi mostrare.

Cosa impari

Capire il concetto senza partire da definizioni astratte.
Vedere un esempio piccolo che puoi copiare e modificare.
Collegare l’argomento al risultato del modulo: una mini app JavaScript pubblicata online con README essenziale.

Esempio da copiare

function filtraLibri(libri, testo) {
  return libri.filter((libro) => libro.titolo.toLowerCase().includes(testo.toLowerCase()));
}

console.log(filtraLibri(libri, "principe"));

Non devi memorizzare tutto subito. Prima copia l’esempio, fallo funzionare e cambia una cosa alla volta.

Esercizio guidato

Aggiungi un campo di ricerca.
Leggi il testo scritto.
Filtra la lista senza cancellare quella originale.
Mostra solo i risultati filtrati.
Svuota il campo e mostra di nuovo tutto.

Controllo finale

Hai finito quando la ricerca non elimina dati e può tornare alla lista completa.