Hoe een automatische voltooiingsfunctie te maken
- Vorige pagina Meervoudige stapvormige formulier
- Volgende pagina Automatische voltooiing sluiten
Leer hoe je een automatische voltooiingsfunctie kunt maken.
Automatische voltooiing
Begin met typen:
Maak een automatische voltooiingsformulier aan
Stap 1 - Voeg HTML toe:
<!-- Zorg ervoor dat het formulier de automatische voltooiing uitschakelt: --> <form autocomplete="off" action="/action_page.php"> <div class="autocomplete" style="width:300px;"> <input id="myInput" type="text" name="myCountry" placeholder="Land"> </div> <input type="submit"> </form>
Stap 2 - Maak een JavaScript-array aan:
Array van alle landen/gebieden ter wereld:
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, Côte d'Ivoire, Kroatia, Cuba, Curaçao, Cyprus, Tsjechië, Denemarken, Djibouti, Dominica, Dominicaanse Republiek, Ecuador, Egypte, El Salvador, Equatoriaal-Guinea, Eritrea, Estland, Ethiopië, Falklandeilanden, Faeröer, Fiji, Finland, Frankrijk, Frans-Polynesië, Frans-West-Indië, Gabon, Gambia, Georgië, Duitsland, Ghana, Gibraltar, Griekenland, Groenland, Grenada, Guam, Guatemala, Guernsey, Guinea, Guinea-Bissau, Guyana, Haïti, Honduras, Hongkong, Hongarije, IJsland, India,Indonesié, Iran, Irak, Ierland, Man-eilanden, Israël, Italié, Jamaica, Japan, Jersey, Jordanié, Kazachstan, Kenia, Kiribati, Kosovo, Koewit, Kirgizié, Laos, Letland, Libanon, Lesotho, Liberia, Libié, Liechtenstein, Litouwen, Luxemburg, Macau, Macedonié, Madagaskar, Malawi, Maleisié, Malediven, Mali, Malta, Marshalleilanden, Mauritanié, Mauritius, Mexico, Micronesié, Moldavié, Monaco, Mongolié, Montenegro, Montserrat, Marokko, Mozambique, Myanmar, Namibié, NauroNepal, Nederland, Nederlandse Antillen, Nieuw-Caledonië, Nieuw-Zeeland, Nicaragua, Niger, Nigeria, Noord-Korea, Noorwegen, Oezbekistan, Pakistan, Palau, Palestina, Panama, Papoea-Nieuw-Guinea, Paraguay, Peru, Filipijnen, Polen, Portugal, Puerto Rico, Qatar, Réunion, Roemenië, Rusland, Rwanda, Saint-Pierre en Miquelon, Samoa, San Marino, São Tomé en Principe, Saoedi-Arabië, Senegal, Servië, Seychellen, Sierra Leone, Singapore, Slowakije, Slovenië, Solomonseilanden, Somalië, Zuid-Afrika, Zuid-Korea, Zuid-Sudan,Spanje, Sri Lanka, Saint Kitts en Nevis, Saint Lucia, Saint Vincent, Soedan, Suriname, Swaziland, Zweden, Zwitserland, Syrië, Taiwan, Tadzjikistan, Tanzania, Thailand, Timor-Leste, Togo, Tonga, Trinidad en Tobago, Tunesië, Turkije, Turkmenistan, Turks- en Caicoseilanden, Tuvalu, Oeganda, Oekraïne, Verenigde Arabische Emiraten, Verenigd Koninkrijk, Verenigde Staten van Amerika, Uruguay, Oezbekistan, Vanuatu, Vaticaanstad, Venezuela, Vietnam, Amerikaanse Maagdeneilanden, Jemen, Zambia, Zimbabwe;
Derde stap - Voeg CSS toe:
De container moet 'relatief' positie hebben.
* { box-sizing: border-box; } lichaam { letter: 16px Arial; } .autocomplete { /* De container moet relatieve positie hebben: */ positie: relatief; weergave: inline-blok; } input { rand: 1px solide transparent; achtergrondkleur: #f1f1f1; inschuiven: 10px; lettergrootte: 16px; } input[type=text] { achtergrondkleur: #f1f1f1; breedte: 100%; } input[type=submit] { achtergrondkleur: DodgerBlue; kleur: #fff; } .autocomplete-items { positie: absoluut; rand: 1px solide #d4d4d4; onderrand: none; bovenrand: none; z-index: 99; /* Het automatisch voltooien van items moet dezelfde breedte hebben als de container: */ boven: 100%; links: 0; rechts: 0; } .autocomplete-items div { inschuiven: 10px; cursor: pointer; achtergrondkleur: #fff; ondersteunde rand: 1px solide #d4d4d4; } .autocomplete-items div:hover { /* Wanneer de muis over een item zweeft: */ achtergrondkleur: #e9e9e9; } .autocomplete-active { /* Wanneer je met de pijltjestoetsen door de items bladert: */ achtergrondkleur: DodgerBlue !important; kleur: #ffffff; }
Stap vier - Voeg JavaScript toe:
function autocomplete(inp, arr) { /* De autocomplete-functie vereist twee parameters, een tekstveld-element en een array met mogelijke automatisch invulwaarden: */ var currentFocus; /* Functie die wordt uitgevoerd wanneer iemand in het tekstveld typt: */ inp.addEventListener("input", function(e) { var a, b, i, val = this.value; /* Sluit elke al geopende lijst met automatisch invulwaarden */ closeAllLists(); if (!val) { return false;} currentFocus = -1; /* Maak een DIV-element aan dat items (waarden) bevat: */ a = document.createElement("DIV"); a.setAttribute("id", this.id + "autocomplete-list"); a.setAttribute("class", "autocomplete-items"); /* Voeg deze DIV-element als subelement van de automatisch invulcontainer toe:*/ this.parentNode.appendChild(a); /* Loop door elke item in het array... */ for (i = 0; i < arr.length; i++) { /* Controleer of het item begint met dezelfde letters als de waarde van het tekstveld: */ if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) { /* Maakt een DIV-element voor elk overeenkomend element: */ b = document.createElement("DIV"); /* Maakt de overeenkomende letters vet: */ b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>"; b.innerHTML += arr[i].substr(val.length); /* Voeg een invoerveld toe om de waarde van het huidige arrayitem op te slaan: */ b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>"; /* Een functie wordt uitgevoerd wanneer iemand op een itemwaarde (DIV-element) klikt: */ b.addEventListener("click", function(e) { /* Voeg de waarde van het tekstveld voor automatische volledigheid toe: */ inp.value = this.getElementsByTagName("input")[0].value; /* Sluit de lijst met automatische volledigheidswaarden, of elke andere geopende lijst met automatische volledigheidswaarden: */ closeAllLists(); }); a.appendChild(b); } } }); /* Een functie wordt uitgevoerd wanneer iemand op een toets op het toetsenbord drukt: */ inp.addEventListener("keydown", function(e) { var x = document.getElementById(this.id + "autocomplete-list"); if (x) x = x.getElementsByTagName("div"); if (e.keyCode == 40) { /* Als de pijl omlaag-toets wordt ingedrukt, wordt de variabele currentFocus verhoogd: */ currentFocus++; /* En maakt het huidige item duidelijker: */ addActive(x); } else if (e.keyCode == 38) { // omhoog /* Als de pijl omhoog-toets wordt ingedrukt, wordt de variabele currentFocus verminderd: */ currentFocus--; /* En maakt het huidige item duidelijker: */ addActive(x); } else if (e.keyCode == 13) { /* Als de ENTER-toets wordt ingedrukt, wordt het indienen van het formulier voorkomen: */ e.preventDefault(); if (currentFocus > -1) { /* 并模拟点击“活动”项目:*/ if (x) x[currentFocus].click(); } } }); function addActive(x) { /* 将项目分类为“活动”的函数:*/ if (!x) return false; /* 首先删除所有项目中的 "active" 类:*/ removeActive(x); if (currentFocus >= x.length) currentFocus = 0; if (currentFocus < 0) currentFocus = (x.length - 1); /* 添加 "autocomplete-active" 类:*/ x[currentFocus].classList.add("autocomplete-active"); } function removeActive(x) { /* 从所有自动完成项中删除 "active" 类的函数:*/ for (var i = 0; i < x.length; i++) { x[i].classList.remove("autocomplete-active"); } } function closeAllLists(elmnt) { /*关闭文档中的所有自动完成列表,除了作为参数传递的那个:*/ 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]); } } } /* 当有人单击文档时执行的函数*/ document.addEventListener("click", function (e) { closeAllLists(e.target); }); }
第五步 - 在 "myInput" 上启用自动完成功能:
将国家数组作为 autocomplete
函数的第二个参数传递:
<script> autocomplete(document.getElementById("myInput"), countries); </script>
- Vorige pagina Meervoudige stapvormige formulier
- Volgende pagina Automatische voltooiing sluiten