Come creare un completamento automatico
- Pagina precedente Modulo a più passaggi
- Pagina successiva Chiudi completamento automatico
Impara come creare una funzione di completamento automatico.
Completamento automatico
Inizia a scrivere:
Creare un modulo di completamento automatico
Primo passo - Aggiungere HTML:
<!-- Assicurarsi che il modulo abbia disattivato la funzione di completamento automatico: -->
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" style="width:300px;">
<input id="myInput" type="text" name="myCountry" placeholder="Country">
</div>
<input type="submit">
</form>
Secondo passo - Creare un array JavaScript:
Array che contiene tutte le nazioni e le regioni del mondo:
var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central African Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica, Costa d'Ivoire, Croazia, Cuba, Curaçao, Cipro, Repubblica Ceca, Danimarca, Gibuti, Dominica, Repubblica Dominicana, Ecuador, Egitto, El Salvador, Guinea Equatoriale, Eritrea, Estonia, Etiopia, Isole Falkland, Isole Faro, Figi, Finlandia, Francia, Polinesia Francese, Indie Occidentali Francesi, Gabon, Gambia, Georgia, Germania, Ghana, Gibilterra, Grecia, Groenlandia, Grenada, Guam, Guatemala, Guernsey, Guinea, Guinea-Bissau, Guyana, Haiti, Honduras, Hong Kong, Ungheria, Islanda, India,Indonesia, Iran, Iraq, Ireland, Isle of Man, Israel, Italy, Jamaica, Japan, Jersey, Jordan, Kazakhstan, Kenya, Kiribati, Kosovo, Kuwait, Kyrgyzstan, Laos, Latvia, Lebanon, Lesotho, Liberia, Libya, Liechtenstein, Lithuania, Luxembourg, Macau, Macedonia, Madagascar, Malawi, Malaysia, Maldives, Mali, Malta, Marshall Islands, Mauritania, Mauritius, Mexico, Micronesia, Moldova, Monaco, Mongolia, Montenegro,Montserrat, Morocco, Mozambique, Myanmar, Namibia, Nauro"Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","North Korea","Norway","Oman","Pakistan","Palau","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Korea","South Sudan","Spagna, Sri Lanka, Saint Kitts e Nevis, Santa Lucia, Saint Vincent, Sudan, Suriname, Swaziland, Svezia, Svizzera, Siria, Taiwan, Tagikistan, Tanzania, Thailandia, Timor Est, Togo, Tonga, Trinidad e Tobago, Tunisia, Turchia, Turkmenistan, Turks e Caicos, Tuvalu, Uganda, Ucraina, Emirati Arabi Uniti, Regno Unito, Stati Uniti d'America, Uruguay, Uzbekistan, Vanuatu, Città del Vaticano, Venezuela, Vietnam, Isole Vergini (Stati Uniti), Yemen, Zambia, Zimbabwe;
Passo 3 - Aggiungi CSS: }}
Il contenitore deve avere una posizionamento 'relativo'.
* { box-sizing: border-box; }
corpo {
font: 16px Arial;
}
.autocomplete {
/* Il contenitore deve essere posizionato in modo relativo: */
posizione: relativo;
visualizzazione: bloccato-in-linea;
}
input {
bordo: 1px solid trasparente;
colore-di-sfondo: #f1f1f1;
padding: 10px;
dimensione-del-testo: 16px;
}
input[type=text] {
colore-di-sfondo: #f1f1f1;
larghezza: 100%;
}
input[type=submit] {
colore-di-sfondo: DodgerBlue;
colore: #fff;
}
.autocomplete-items {
posizione: assoluto;
bordo: 1px solid #d4d4d4;
bordo-sopra: none;
bordo-inferiore: none;
z-index: 99;
/* Posiziona automaticamente l'elenco delle opzioni con la stessa larghezza del contenitore: */
cima: 100%;
sinistra: 0;
right: 0;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
/* Quando il mouse è sopra un elemento: */
background-color: #e9e9e9;
}
.autocomplete-active {
/* Quando si naviga tra gli elementi utilizzando i tasti freccia: */
background-color: DodgerBlue !important;
color: #ffffff;
}
Passo 4 - Aggiungi JavaScript:
function autocomplete(inp, arr) {
/* La funzione di completamento automatico richiede due parametri, uno è l'elemento del campo di testo e l'altro è un array di valori possibili per il completamento automatico: */
var currentFocus;
/* Funzione eseguita quando qualcuno scrive nel campo di testo: */
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
/* Chiudi qualsiasi elenco di valori di completamento automatico aperto: */
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
/* Crea un elemento DIV contenente gli elementi (valori) dei progetti: */
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/* Aggiungi questo elemento DIV come figlio dell'elemento container dell'autocompletamento:*/
this.parentNode.appendChild(a);
/* Esamina ogni elemento nell'array... */
for (i = 0; i < arr.length; i++) {
/* Verifica se l'elemento di progetto inizia con le lettere identiche al valore del campo di testo: */
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
/* Crea un elemento DIV per ogni elemento di corrispondenza: */
b = document.createElement("DIV");
/* Mette in grassetto le lettere corrispondenti: */
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
/* Inserisce un campo di input per salvare il valore dell'elemento dell'array corrente: */
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
/* Esegue una funzione quando qualcuno clicca sul valore dell'elemento (elemento DIV): */
b.addEventListener("click", function(e) {
/* Inserisce il valore del campo di testo di completamento automatico: */
inp.value = this.getElementsByTagName("input")[0].value;
/* Chiude l'elenco dei valori di completamento automatico, o qualsiasi altro elenco di valori di completamento automatico aperto: */
closeAllLists();
});
a.appendChild(b);
}
}
});
/* Esegue una funzione quando qualcuno preme un tasto sulla tastiera: */
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
/* Se preme il tasto freccia in giù, aumenta la variabile currentFocus: */
currentFocus++;
/* E rende l'elemento corrente più evidente: */
addActive(x);
} else if (e.keyCode == 38) { //up
/* Se preme il tasto freccia in su, riduce la variabile currentFocus: */
currentFocus--;
/* E rende l'elemento corrente più evidente: */
addActive(x);
} else if (e.keyCode == 13) {
/* Se preme il tasto ENTER, blocca la presentazione del modulo: */
e.preventDefault();
if (currentFocus > -1) {
/* E simulare il click sull'elemento "attivo": */
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/* Funzione per classificare gli elementi come "attivi": */
if (!x) return false;
/* Prima di tutto, rimuovere la classe "active" da tutti gli elementi: */
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/* Funzione per aggiungere la classe "autocomplete-active": */
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/* Funzione per rimuovere la classe "active" da tutti gli elementi di completamento: */
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/* Chiudere tutte le liste di completamento del documento, eccetto quella passata come parametro: */
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
/* Funzione eseguita quando qualcuno clicca sul documento */
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
Passo 5 - Abilitare la funzione di completamento automatico su "myInput":
Il vettore di paesi come autocomplete La seconda parametro passata:
<script>
autocomplete(document.getElementById("myInput"), countries);
</script>
- Pagina precedente Modulo a più passaggi
- Pagina successiva Chiudi completamento automatico
