Autocompletamento | Codegrind

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;
}