Traccia
Create una rudimentale barra di ricerca implementando la funzione di autocompletamento. In pratica mentre scrivete nel campo il sistema deve suggerirvi sotto dei nomi presi da un array.
Cliccando sui nomi suggeriti il valore deve essere trasferito sulla barra di ricerca ed i nomi consigliati nascosti.
Se il risultato è corretto, ogni soluzione è valida.
Soluzione
Pagina HTML
<!DOCTYPE html><html lang="it"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <section class="m-5 p-5"> <input type="text" class="border-2 p-2" placeholder="chi stai cercando?" id="ricerca" /> <div id="risultati" class="border-2 p-2"></div> </section> <script src="script.js"></script> </body></html>
Pagina Script.js
Evento per autocompletamento più nomi da suggerire.
const input = document.getElementById("ricerca");input.addEventListener("keyup", autocomplete);const risultati = document.getElementById("risultati");const nomi = [ "andrea", "anna", "marco", "luca", "giovanni", "giovanna", "chiara", "clara",];
Funzione match del valore
function autocompleteMatch(valore) { if (valore == "") return []; const reg = new RegExp(valore); return nomi.filter((nome) => { if (nome.match(reg)) return nome; });}
Funzione autocompletamento
function autocomplete(event) { let nomiConsigliati = ""; const nomi = autocompleteMatch(event.target.value); nomi.forEach((nome) => { nomiConsigliati += `<li class="hover:bg-gray-200" onclick="seleziona(event)">${nome}</li>`; }); risultati.innerHTML = `<ul>${nomiConsigliati}</ul>`;}
Funzione per selezionare il suggerimento
function seleziona(event) { risultati.innerHTML = ""; input.value = event.target.textContent;}