如何创建自动完成
- Página anterior Formulário de múltiplos passos
- Próxima página Fechar completar automaticamente
学习如何创建自动完成功能。
自动完成
请开始输入:
创建自动完成表单
第一步 - 添加 HTML:
第二步 - 创建 JavaScript 数组:
包含世界上所有国家/地区的数组:
var countries = ["Afeganistão","Albânia","Argélia","Andorra","Angola","Anguilla","Antígua e Barbuda","Argentina","Armênia","Aruba","Austrália","Áustria","Azerbaijão","Bahamas","Bahrain","Bangladesh","Barbados","Bielorrússia","Bélgica","Belize","Benin","Bermuda","Butão","Bolívia","Bósnia e Herzegovina","Botswana","Brasil","Ilhas Virgens Britânicas","Brunei","Bulgária","Burkina Faso","Burundi","Cambodja","Camarões","Canadá","Cabo Verde","Ilhas Cayman","República Central Africana","Chade","Chile","China","Colômbia","Congo","Ilhas Cook","Costa Rica, "Côte d'Ivoire", "Croácia", "Cuba", "Curaçao", "Chipre", "República Tcheca", "Dinamarca", "Djibouti", "Dominica", "República Dominicana", "Equador", "Egito", "El Salvador", "Guiné Equatorial", "Eritreia", "Estónia", "Etiópia", "Ilhas Falkland", "Ilhas Feroe", "Fiji", "Finlândia", "França", "Polinésia Francesa", "Ilhas do Mar do Caribe", "Gabão", "Gâmbia", "Geórgia", "Alemanha", "Gana", "Gibraltar", "Grécia", "Groenlândia", "Granada", "Guam", "Guatemala", "Guernsey", "Guiné", "Guiné-Bissau", "Guiana", "Haiti", "Honduras", "Hong Kong", "Hungria", "Islândia", "Índia", ""Indonésia, Irão, Iraque, Irlanda, Ilha de Man, Israel, Itália, Jamaica, Japão, Jersey, Jordânia, Cazaquistão, Quénia, Quiribáti, Kosovo, Kuwait, Kirgizistão, Laos, Letónia, Líbano, Lesoto, Libéria, Líbia, Liechtenstein, Lituânia, Luxemburgo, Macau, Macedónia, Madagáscar, Malaui, Malásia, Maldivas, Mali, Malta, Ilhas Marshall, Mauritânia, Maurício, México, Micronésia, Moldávia, Mónaco, Mongólia, Montenegro, Montserrat, Marrocos, Moçambique, Mianmar, Namíbia, 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","Réunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San Marino","São Tomé and Príncipe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Korea","South Sudan","Espanha, Sri Lanka, Santa Kitts e Nevis, Santa Lúcia, São Vicente, Sudão, Suriname, Suazilândia, Suécia, Suíça, Síria, Taiwan, Tadjiquistão, Tanzânia, Tailândia, Timor-Leste, Togo, Tonga, Trindade e Tobago, Tunísia, Turquia, Turcomenistão, Turks e Caicos, Tuvalu, Uganda, Ucrânia, Emirados Árabes Unidos, Reino Unido, Estados Unidos da América, Uruguai, Usbequistão, Vanuatu, Cidade do Vaticano, Venezuela, Vietnã, Ilhas Virgens (EUA), Iêmen, Zâmbia, Zimbábue;
Terceiro passo - Adicionar CSS: }}
O contêiner deve ter alinhamento 'relativo'.
* { box-sizing: border-box; } corpo { fonte: 16px Arial; } .autocomplete { /* O contêiner deve ser posicionado relativamente: */ posição: relativa; exibição: bloco-inline; } input { borda: 1px sólida transparente; cor-fundo: #f1f1f1; padding: 10px; tamanho-fonte: 16px; } input[type=text] { cor-fundo: #f1f1f1; largura: 100%; } input[type=submit] { cor-fundo: DodgerBlue; cor: #fff; } .autocomplete-items { posição: absoluta; borda: 1px sólida #d4d4d4; borda-baixo: none; borda-topo: none; z-index: 99; /* Ajusta automaticamente o tamanho do item para ser igual ao do contêiner: */ topo: 100%; esquerda: 0; right: 0; } .autocomplete-items div { padding: 10px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4; } .autocomplete-items div:hover { /* Quando o mouse passar sobre o item: */ background-color: #e9e9e9; } .autocomplete-active { /* Quando usar as teclas de seta para navegar pelos itens:*/ background-color: DodgerBlue !important; color: #ffffff; }
Quarto passo - Adicionar JavaScript:
function autocomplete(inp, arr) { /* A função de completação automática precisa de dois parâmetros, um é o elemento do campo de texto e o outro é um array de possíveis valores para completação: */ var currentFocus; /* Função executada quando alguém escreve no campo de texto: */ inp.addEventListener("input", function(e) { var a, b, i, val = this.value; /* Fechar qualquer lista de valores de completação automática aberta: */ closeAllLists(); if (!val) { return false;} currentFocus = -1; /* Criar um elemento DIV que contém os itens (valores): */ a = document.createElement("DIV"); a.setAttribute("id", this.id + "autocomplete-list"); a.setAttribute("class", "autocomplete-items"); /* Adicionar este elemento DIV como filho do container de completação automática:*/ this.parentNode.appendChild(a); /* Varredura de cada item no array... */ for (i = 0; i < arr.length; i++) { /* Verificar se o item começa com as letras do valor do campo de texto: */ if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) { /* Cria um elemento DIV para cada elemento correspondente: */ b = document.createElement("DIV"); /* Itala as letras correspondentes em negrito: */ b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>"; b.innerHTML += arr[i].substr(val.length); /* Insere um campo de entrada para salvar o valor do item atual do array: */ b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>"; /* Quando alguém clicar no valor do item (elemento DIV) executed uma função: */ b.addEventListener("click", function(e) { /* Insere o valor do campo de texto de completação automática: */ inp.value = this.getElementsByTagName("input")[0].value; /* Fecha a lista de valores de completação automática, ou qualquer outra lista de valores de completação automática aberta: */ closeAllLists(); }); a.appendChild(b); } } }); /* Quando alguém pressionar uma tecla no teclado, execute uma função: */ inp.addEventListener("keydown", function(e) { var x = document.getElementById(this.id + "autocomplete-list"); if (x) x = x.getElementsByTagName("div"); if (e.keyCode == 40) { /* Se pressionar a seta para baixo, aumenta a variável currentFocus: */ currentFocus++; /* E torna o item atual mais evidente: */ addActive(x); } else if (e.keyCode == 38) { //up /* Se pressionar a seta para cima, diminui a variável currentFocus: */ currentFocus--; /* E torna o item atual mais evidente: */ addActive(x); } else if (e.keyCode == 13) { /* Se pressionar a tecla ENTER, bloqueia o envio do formulário: */ e.preventDefault(); if (currentFocus > -1) { /* E simular um clique no item "ativo": */ if (x) x[currentFocus].click(); } } }); function addActive(x) { /* Função para classificar os itens como "ativos": */ if (!x) return false; /* Primeiro, remover a classe "active" de todos os itens: */ removeActive(x); if (currentFocus >= x.length) currentFocus = 0; if (currentFocus < 0) currentFocus = (x.length - 1); /* Função para adicionar a classe "autocomplete-active": */ x[currentFocus].classList.add("autocomplete-active"); } function removeActive(x) { /* Função para remover a classe "active" de todos os itens de completamento: */ for (var i = 0; i < x.length; i++) { x[i].classList.remove("autocomplete-active"); } } function closeAllLists(elmnt) { /* Fechar todas as listas de completamento do documento, exceto a que foi passada 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]); } } } /* Função executada ao clicar no documento */ document.addEventListener("click", function (e) { closeAllLists(e.target); }); }
Passo 5 - Ativar a função de completamento automático em "myInput":
Passar o array de países como autocomplete
O segundo parâmetro passado:
<script> autocomplete(document.getElementById("myInput"), countries); </script>
- Página anterior Formulário de múltiplos passos
- Próxima página Fechar completar automaticamente