Wie man eine automatische Vervollständigung erstellt
- Previous page Multi-step form
- Next page Turn off auto-complete
Lernen Sie, wie Sie eine automatische Vervollständigung erstellen.
Automatische Vervollständigung
Beginnen Sie mit der Eingabe:
Erstellen Sie ein automatisches Formular
Schritt 1 - Fügen Sie HTML hinzu:
<!-- Stellen Sie sicher, dass das Formular die automatische Vervollständigung deaktiviert hat: -->
<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>
Schritt 2 - Erstellen Sie ein JavaScript-Array:
Enthält eine Liste aller Länder und Regionen der Welt:
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, Falklandinseln, Färöer, 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, Jamaika, Japan, Jersey, Jordan, Kasachstan, Kenia, Kiribati, Kosovo, Kувait, Kirgistan, Laos, Lettland, Libanon, Lesotho, Liberia, Libyen, Liechtenstein, Litauen, Luxemburg, Macau, Mazedonien, Madagaskar, Malawi, Malaysia, Malediven, Mali, Malta, Marshallinseln, Mauretanien, Mauritius, Mexiko, Mikronesien, Moldawien, Monaco, Mongolei, Montenegro, Montserrat, Marokko, Mosambik, Myanmar, Namibia, Nauru"Nepal","Niederlande","Niederländische Antillen","Neukaledonien","Neuseeland","Nicaragua","Niger","Nigeria","Nordkorea","Norwegen","Oman","Pakistan","Palau","Palästina","Panama","Papua-Neuguinea","Paraguay","Peru","Philippinen","Polen","Portugal","Puerto Rico","Katar","Réunion","Rumänien","Russland","Ruanda","Saint Pierre und Miquelon","Samoa","San Marino","São Tomé und Príncipe","Saudi-Arabien","Senegal","Serbien","Seychellen","Sierra Leone","Singapur","Slowakei","Slowenien","Salomon-Inseln","Somalia","Südafrika","Südkorea","Südsudan","Spanien,"Sri Lanka","St. Kitts und Nevis","St. Lucia","St. Vincent","Sudan","Suriname","Swasiland","Schweden","Schweiz","Syrien","Taiwan","Tadschikistan","Tansania","Thailand","Timor-Leste","Togo","Tonga","Trinidad und Tobago","Tunesien","Türkei","Turkmenistan","Turks- und Caicos-Inseln","Tuvalu","Uganda","Ukraine","Vereinigte Arabische Emirate","Vereinigtes Königreich","Vereinigte Staaten von Amerika","Uruguay","Usbekistan","Vanuatu","Vatikanstadt","Venezuela","Vietnam","Vereinigte Staaten von Amerika","Jemen","Sambia","Simbabwe";
Dritter Schritt - CSS hinzufügen: }}
Der Behälter muss relative Positionierung haben.
* { box-sizing: border-box; }
body {
font: 16px Arial;
}
.autocomplete {
/* Der Behälter muss relativ positioniert sein: */
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;
/* Automatische Positionierung der automatischen Vervollständigung auf gleiche Breite wie Behälter: */
top: 100%;
links: 0;
right: 0;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
/* Wenn der Mauszeiger über einem Projekt steht: */
background-color: #e9e9e9;
}
.autocomplete-active {
/* Wenn Sie mit den Pfeiltasten durch die Projekte navigieren:*/
background-color: DodgerBlue !important;
color: #ffffff;
}
Vierter Schritt - Fügen Sie JavaScript hinzu:
function autocomplete(inp, arr) {
/* Die automatische Vervollständigungsfunktion erfordert zwei Parameter, einen Textfeldelement und ein Array mit möglichen Werten zur automatischen Vervollständigung: */
var currentFocus;
/* Funktion, die ausgeführt wird, wenn jemand im Textfeld schreibt: */
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
/* Schließen Sie alle bereits geöffneten automatischen Vervollständigungswertlisten */
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
/* Erstellen Sie ein DIV-Element, das die Projekte (Werte) enthält: */
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/* Fügen Sie diesen DIV-Element als Kind des automatischen Vervollständigungskontainers hinzu:*/
this.parentNode.appendChild(a);
/* Durchsuchen Sie jedes Element im Array... */
for (i = 0; i < arr.length; i++) {
/* Überprüfen Sie, ob das Projekt mit einem Buchstaben beginnt, der dem Wert des Textfelds entspricht: */
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
/* Erzeugt für jedes Übereinstimmungselement ein DIV-Element: */
b = document.createElement("DIV");
/* Fügt die übereinstimmenden Buchstaben fett hinzu: */
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
/* Fügt ein Eingabefeld hinzu, um den Wert des aktuellen Array-Elements zu speichern: */
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
/* Eine Funktion wird ausgeführt, wenn jemand auf den Wert des Elements klickt (DIV-Element): */
b.addEventListener("click", function(e) {
/* Fügt den Wert des automatischen Vervollständigungstextfelds ein: */
inp.value = this.getElementsByTagName("input")[0].value;
/* Schließt die Liste der automatischen Vervollständigungswerte, oder jede andere geöffnete Liste der automatischen Vervollständigungswerte: */
closeAllLists();
});
a.appendChild(b);
}
}
});
/* Eine Funktion wird ausgeführt, wenn jemand auf die Taste der Tastatur drückt: */
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
/* Wenn die PFEILTASTE nach unten gedrückt wird, wird die Variable currentFocus erhöht: */
currentFocus++;
/* Und macht das aktuelle Element hervorragender: */
addActive(x);
} else if (e.keyCode == 38) { // hoch
/* Wenn die PFEILTASTE nach oben gedrückt wird, wird die Variable currentFocus verringert: */
currentFocus--;
/* Und macht das aktuelle Element hervorragender: */
addActive(x);
} else if (e.keyCode == 13) {
/* Wenn die EINGABETASTE gedrückt wird, wird die Übermittlung des Formulars verhindert: */
e.preventDefault();
if (currentFocus > -1) {
/* Simuliert einen Klick auf das "aktive" Element: */
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/* Die Funktion, um Elemente als "aktiv" zu kategorisieren: */
if (!x) return false;
/* Zuerst lösche die "active"-Klasse aus allen Elementen: */
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/* Fügt die "autocomplete-active"-Klasse hinzu: */
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/* Die Funktion, um die "active"-Klasse von allen Auto-Vervollständigungselementen zu entfernen: */
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/* Schließe alle Auto-Vervollständigung-Listen im Dokument, außer der, die als Parameter übergeben wurde: */
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]);
}
}
}
/* Die Funktion, die ausgeführt wird, wenn jemand auf das Dokument klickt */
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}
Fünfter Schritt - Die automatische Vervollständigungsfunktion für "myInput" aktivieren:
Das Land-Array als autocomplete Die zweite Parameterübergabe:
<script>
autocomplete(document.getElementById("myInput"), countries);
</script>
- Previous page Multi-step form
- Next page Turn off auto-complete
