如何创建自动完成
- Página anterior Formulario de pasos múltiples
- Página siguiente Cerrar la finalización automática
学习如何创建自动完成功能。
自动完成
请开始输入：
创建自动完成表单
第一步 - 添加 HTML：
第二步 - 创建 JavaScript 数组：
包含世界上所有国家/地区的数组：
var countries = ["Afganistán","Albania","Argelia","Andorra","Angola","Anguilla","Antigua y Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaiyán","Bahamas","Baréin","Bangladesh","Barbados","Bielorrusia","Bélgica","Belice","Benín","Bermudas","Bután","Bolivia","Bosnia y Herzegovina","Botswana","Brasil"," Islas Vírgenes Británicas","Brunéi","Bulgaria","Burkina Faso","Burundi","Camboya","Camerún","Canadá","Cabo Verde","Islas Caimán","República Centroafricana","Chad","Chile","China","Colombia","Congo"," Islas Cook","Costa Rica, Costa de Ivoire, Croacia, Cuba, Curazao, Chipre, Republica Checa, Dinamarca, Djibouti, Dominica, Republica Dominicana, Ecuador, Egipto, El Salvador, Guinea Ecuatorial, Eritrea, Estonia, Etiopia, Islas Malvinas, Islas Feroe, Fiyi, Finlandia, Francia, Polinesia Francesa, Indias Occidentales Francesas, Gabon, Gambia, Georgia, Alemania, Ghana, Gibraltar, Grecia, Groenlandia, Granada, Guam, Guatemala, Guernsey, Guinea, Guinea-Bissau, Guyana, Haití, Honduras, Hong Kong, Hungría, Islandia, India,Indonesia, Irán, Irak, Irlanda, la Isla de Man, Israel, Italia, Jamaica, Japón, Jersey, Jordania, Kazajistán, Kenia, Kiribati, Kosovo, Kuwait, Kirguistán, Laos, Letonia, Líbano, Lesoto, Liberia, Libia, Liechtenstein, Lituania, Luxemburgo, Macao, Macedonia, Madagascar, Malawi, Malasia, Maldivas, Malí, Malta, Islas Marshall, Mauritania, Mauricio, México, Micronesia, Moldavia, Mónaco, Mongolia, Montenegro, Montserrat, Marruecos, Mozambique, Birmania, Namibia, NauroNepal, Países Bajos, Antillas Neerlandesas, Nueva Caledonia, Nueva Zelanda, Nicaragua, Níger, Nigeria, Corea del Norte, Noruega, Omán, Pakistán, Palau, Palestina, Panamá, Papúa Nueva Guinea, Paraguay, Perú, Filipinas, Polonia, Portugal, Puerto Rico, Qatar, Reunión, Rumania, Rusia, Ruanda, Saint Pierre y Miquelon, Samoa, San Marino, Santo Tomé y Príncipe, Arabia Saudita, Senegal, Serbia, Seychelles, Sierra Leona, Singapur, Eslovaquia, Eslovenia, Islas Salomón, Somalia, Sudáfrica, Corea del Sur, Sudán del Sur,España, Sri Lanka, San Cristóbal y Nieves, Santa Lucía, San Vicente y las Granadinas, Sudán, Surinam, Suazilandia, Suecia, Suiza, Siria, Taiwán, Tayikistán, Tanzania, Tailandia, Timor Oriental, Togo, Tonga, Trinidad y Tobago, Túnez, Turquía, Turkmenistán, Islas Turcas y Caicos, Tuvalu, Uganda, Ucrania, Emiratos Árabes Unidos, Reino Unido, Estados Unidos de América, Uruguay, Uzbekistán, Vanuatu, Ciudad del Vaticano, Venezuela, Vietnam, Islas Vírgenes de los Estados Unidos, Yemen, Zambia, Zimbabue;
Tercero - Añadir CSS: }}
El contenedor debe tener la posición 'relativa'.
* { box-sizing: border-box; }
body {
font: 16px Arial;
}
.autocomplete {
/* El contenedor debe estar ubicado en relación: */
position: relative;
display: inline-block;
}
input {
border: 1px solid transparent;
background-color: #f1f1f1;
padding: 10px;
font-size: 16px;
}
input[type=text] {
background-color: #f1f1f1;
width: 100%;
}
input[type=submit] {
background-color: DodgerBlue;
color: #fff;
}
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/* Ajustar la posición de las sugerencias automáticas para que coincida con el ancho del contenedor: */
top: 100%;
left: 0;
right: 0;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
/* Cuando el ratón se suspende sobre un proyecto: */
background-color: #e9e9e9;
}
.autocomplete-active {
/* Cuando se navega por los proyectos usando las teclas de flecha: */
background-color: DodgerBlue !important;
color: #ffffff;
}
Paso cuatro - Añadir JavaScript:
function autocomplete(inp, arr) {
/* La función de autocompletar necesita dos parámetros, uno es el elemento del campo de texto y el otro es el array de posibles valores para autocompletar: */
var currentFocus;
/* Función ejecutada cuando alguien escribe en el campo de texto: */
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
/* Cerrar cualquier lista de valores de autocompletar abierta: */
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
/* Crear un elemento DIV que contiene los proyectos (valores): */
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/* Adjuntar este elemento DIV como hijo del contenedor de autocompletar:*/
this.parentNode.appendChild(a);
/* Recorrer cada elemento en el array... */
for (i = 0; i < arr.length; i++) {
/* Verificar si el proyecto comienza con las letras iguales al valor del campo de texto: */
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
/* Crea un elemento DIV para cada elemento coincidente: */
b = document.createElement("DIV");
/* Resalta las letras coincidentes en negrita: */
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
/* Inserta un campo de entrada para guardar el valor del elemento de la matriz actual: */
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
/* Se ejecuta una función cuando alguien hace clic en el valor del elemento (elemento DIV): */
b.addEventListener("click", function(e) {
/* Inserta el valor del campo de texto de autocompletar: */
inp.value = this.getElementsByTagName("input")[0].value;
/* Cierra la lista de valores de autocompletar, o cualquier otra lista de valores de autocompletar abierta: */
closeAllLists();
});
a.appendChild(b);
}
}
});
/* Se ejecuta una función cuando alguien presiona una tecla en el teclado: */
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
/* Si se presiona la flecha hacia abajo, se aumenta la variable currentFocus: */
currentFocus++;
/* Y hace que el elemento actual sea más evidente: */
addActive(x);
} else if (e.keyCode == 38) { //arriba
/* Si se presiona la flecha hacia arriba, se reduce la variable currentFocus: */
currentFocus--;
/* Y hace que el elemento actual sea más evidente: */
addActive(x);
} else if (e.keyCode == 13) {
/* Si se presiona la tecla ENTER, se impide que se envíe el formulario: */
e.preventDefault();
if (currentFocus > -1) {
/* Simular el clic en el elemento "activo": */
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/* Función para clasificar los elementos como "activos": */
if (!x) return false;
/* Primero eliminar la clase "active" de todos los elementos: */
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/* Añadir la clase "autocomplete-active": */
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/* Función para eliminar la clase "autocomplete-active" de todos los elementos de autocompletar: */
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/* Cerrar todas las listas de autocompletar en el documento, excepto la que se pasa como parámetro: */
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]);
}
}
}
/* Función ejecutada cuando alguien hace clic en el documento */
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
Paso 5 - Habilitar la función de autocompletar en "myInput":
Se transmite el array de países como autocomplete La segunda función de parámetro transmitida:
<script>
autocomplete(document.getElementById("myInput"), countries);
</script>
- Página anterior Formulario de pasos múltiples
- Página siguiente Cerrar la finalización automática
