Il completamento automatico può essere facilmente implementato in JavaScript utilizzando librerie esterne come jQuery UI o altre analoghe. Tuttavia, scopriamo come implementarla da zero.
Supponiamo che tu stia creando un campo di ricerca e vuoi suggerire parole correlate mentre l’utente sta digitando. Useremo una matrice di parole come base per il completamento automatico.
Qui vediamo un esempio di codice di base:
```
let parole = [“Apple”, “Banana”, “Ciliegia”, “Dattero”, “Fico”, “Kiwi”, “Lemon”, “Melone”, “Nespola”, “Oliva”, “Pera”, “Quinoa”, “Ribes”, “Susina”, “Uva”, “Zucca”];
let casellaTesto = document.querySelector(“#testoInput”);
let listaSuggerimenti = document.querySelector(“#suggerimenti”);
casellaTesto.addEventListener(‘input’, function() { listaSuggerimenti.innerHTML = ‘’; let testoInserito = this.value;
// Se l’utente ha effettivamente inserito del testo, cercare corrispondenze if (testoInserito) { let corrispondenze = parole.filter(parola => parola.toLowerCase().startsWith(testoInserito.toLowerCase())); // Per ogni corrispondenza, creare un elemento della lista e aggiungerlo alla lista dei suggerimenti corrispondenze.forEach(corrispondenza => { let elementoLista = document.createElement(‘li’); elementoLista.textContent = corrispondenza; // se l’utente clicca sul suggerimento, imposta il valore della casella di testo a quello del suggerimento e svuota la lista dei suggerimenti elementoLista.addEventListener(‘click’, function() { casellaTesto.value = this.textContent; listaSuggerimenti.innerHTML = ‘’; }); listaSuggerimenti.appendChild(elementoLista); }); } }); ```Nel tuo HTML, avrai bisogno di una casella di input e di un elemento ul per i suggerimenti:
```
Ricordati che questo è soltanto un esempio base. In un’applicazione del mondo reale, vorresti probabilmente fare le tue richieste di completamento automatico a un server, piuttosto che utilizzare una matrice codificata. Potresti anche voler implementare funzionalità aggiuntive, come la gestione dei suggerimenti multipli.
