Hvordan man opretter en automatisk færdiggørelse
- Forrige side Flerstegsformular
- Næste side Deaktiver automatisk færdiggørelse
Lær at oprette en automatisk færdiggørelse funktion.
Automatisk færdiggørelse
Begynd at skrive:
Opret en automatisk færdiggørelse formular
Trin-first - Tilføj HTML:
<!-- Sørg for, at formularen har slået automatisk færdiggørelse fra: -->
<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>
Trin-third - Opret JavaScript-arrayen:
Indeholder en array med alle lande og regioner i verden:
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, Kroatien, Kuba, Curaçao, Zypern, Tschechische Republik, Dänemark, Dschibuti, Dominica, Dominikanische Republik, Ecuador, Ägypten, El Salvador, Äquatorialguinea, Eritrea, Estland, Äthiopien, Falklandöarna, Färöerne, Fidschi, Finnland, Frankreich, Französisch-Polynesien, Französische Antillen, Gabun, Gambia, Georgien, Deutschland, Ghana, Gibraltar, Griechenland, Grönland, Grenada, Guam, Guatemala, Guernsey, Guinea, Guinea-Bissau, Guyana, Haiti, Honduras, Hongkong, Ungarn, Island, Indien,Indonesien, Iran, Irak, Irland, Isle of Man, Israel, Italien, Jamaica, Japan, Jersey, Jordan, Kasakhstan, Kenya, Kiribati, Kosovo, Kuwait, Kirgistan, Laos, Letland, Libanon, Lesotho, Liberia, Libyen, Liechtenstein, Litauen, Luxemburg, Macao, Makedonien, Madagaskar, Malawi, Malaysia, Malediverne, Mali, Malta, Marshalløerne, Mauretanien, Mauritius, Mexico, Mikronesien, Moldova, Monaco, Mongoliet, Montenegro, Montserrat, Marokko, Mosambik, 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",""Spanien, Sri Lanka, St. Kitts og Nevis, St. Lucia, St. Vincent, Sudan, Surinam, Swaziland, Sverige, Schweiz, Syrien, Taiwan, Tadsjikistan, Tanzania, Thailand, Timor L'Este, Togo, Tonga, Trinidad og Tobago, Tunisien, Tyrkiet, Turkmenistan, Turks- og Caicosøerne, Tuvalu, Uganda, Ukraine, Forenede Arabemirater, Forenede Kongerige, Forenede Stater, Uruguay, Usbekistan, Vanuatu, Vatikanstaten, Venezuela, Vietnam, Virginøerne (USA), Jemen, Zambia, Zimbabwe;
Tredje trin - Tilføj CSS:
Beholderen skal have 'relativ' position.
* { box-sizing: border-box; }
body {
font: 16px Arial;
}
.autocomplete {
/* Beholderen skal have relativ position: */
position: relative;
display: inline-block;
}
input {
border: 1px solid transparent;
background-color: #f1f1f1;
marginal: 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;
/* Automatisk afslutter elementer med samme bredde som beholderen: */
top: 100%;
venstre: 0;
højre: 0;
}
.autocomplete-items div {
marginal: 10px;
peger: pekere;
baggrundsfarve: #fff;
bunds kant: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
/* Når musen hæves over en post: */
baggrundsfarve: #e9e9e9;
}
.autocomplete-active {
/* Når der bruges piletaster til at navigere mellem poster: */
baggrundsfarve: DodgerBlue !vigtigt;
farve: #ffffff;
}
Fjerde trin - Tilføj JavaScript:
function autocomplete(inp, arr) {
/* Automatiseret færdiggørelsesfunktion kræver to parametre, en tekstfeltselement og en array med mulige færdiggørelsesværdier: */
var currentFocus;
/* Funktion, der udføres, når nogen skriver i tekstfeltet: */
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
/* Luk eventuelle åbne færdiggørelsesværdilister */
closeAllLists();
hvis (!val) { return false;}
currentFocus = -1;
/* Opret en DIV-element, der indeholder poster (værdier): */
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/* Tilføj denne DIV-element som en underkomponent af den automatiske færdiggørelsescontainer:*/
this.parentNode.appendChild(a);
/* Gennemgå hver post i arrayet... */
for (i = 0; i < arr.length; i++) {
/* Tjek om elementet starter med de samme bogstaver som tekstfeltets værdi: */
hvis (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
/* Opret et DIV-element for hver matchende element: */
b = document.createElement("DIV");
/* Gør de matchende bogstaver fed: */
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
/* Indsæt et inputfelt til at gemme værdien af det aktuelle element i arrayet: */
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
/* Udfør en funktion, når nogen klikker på værdien af elementet (DIV-element): */
b.addEventListener("click", function(e) {
/* Indsæt værdien af automatisk færdiggørelsestekstfeltet: */
inp.value = this.getElementsByTagName("input")[0].value;
/* Luk værdilisterne for automatisk færdiggørelse, eller enhver anden åben værdiliste for automatisk færdiggørelse: */
closeAllLists();
});
a.appendChild(b);
}
}
});
/* Udfør en funktion, når nogen trykker en tast på tastaturet: */
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
/* Hvis piletasten ned trykkes ned, øg currentFocus-variablen: */
currentFocus++;
/* Gør det aktuelle element mere fremtrædende: */
addActive(x);
} else if (e.keyCode == 38) { // op
/* Hvis piletasten op trykkes ned, reducer currentFocus-variablen: */
currentFocus--;
/* Gør det aktuelle element mere fremtrædende: */
addActive(x);
} else if (e.keyCode == 13) {
/* Hvis ENTER-tasten trykkes ned, forhindre indsendelse af formularen: */
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>
- Forrige side Flerstegsformular
- Næste side Deaktiver automatisk færdiggørelse
