suchen

Heim >Web-Frontend >js-Tutorial >Beispiel für Ajax zum automatischen Ausfüllen von Formularfeldern

Beispiel für Ajax zum automatischen Ausfüllen von Formularfeldern

韦小宝
韦小宝Original
2017-12-31 10:24:531759Durchsuche

In diesem Artikel wird hauptsächlich die Verwendung von Ajax zum automatischen Ausfüllen von Formularfeldern vorgestellt. Freunde, die sich für Ajax interessieren, können sich auf das Beispiel von Ajax zum automatischen Ausfüllen von Formularfeldern beziehen!

Skript eins: 


<!DOCTYPE html>
<html>
<head>
<title>Auto-fill Form Fields</title>
<link rel="stylesheet"href="script06.css" rel="external nofollow" >
<script src="script06.js"></script>
</head>
<body>
<form action="#">
Please enter your state:<br>
<input type="text" id="searchField" autocomplete="off"><br>
<p id="popups"> </p>
</form>
</body>
</html>


Skript zwei: 


body, #searchfield {
font: 1.2em arial, helvetica,sans-serif;
}
.suggestions {
background-color: #FFF;
padding: 2px 6px;
border: 1px solid #000;
}
.suggestions:hover {
background-color: #69F;
}
#popups {
position: absolute;
}
#searchField.error {
background-color: #FFC;
}


Skript drei: 



window.onload = initAll;
var xhr = false;
var statesArray = new Array();
function initAll() {
document.getElementById("searchField").onkeyup = searchSuggest;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) { }
}
}
if (xhr) {
xhr.onreadystatechange = setStatesArray;
xhr.open("GET", "us-states.xml",true);
xhr.send(null);
}
else {
alert("Sorry, but I couldn&#39;t create an XMLHttpRequest");
}
}
function setStatesArray() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if (xhr.responseXML) {
var allStates = xhr.responseXML.getElementsByTagName("item");
for (var i=0; i<allStates.length; i++) {
statesArray[i] = allStates[i].getElementsByTagName("label")[0].firstChild;
}
}
}
else {
alert("There was a problem with the request " + xhr.status);
}
}
}
function searchSuggest() {
var str = document.getElementById("searchField").value;
document.getElementById("searchField").className = "";
if (str != "") {
document.getElementById("popups").innerHTML = "";
for (var i=0; i<statesArray.length;i++) {
var thisState = statesArray[i].nodeValue;
if (thisState.toLowerCase().indexOf(str.toLowerCase())== 0) {
var tempp = document.createElement("p");
tempp.innerHTML = thisState;
tempp.onclick = makeChoice;
tempp.className = "suggestions";
document.getElementById("popups").appendChild(tempp);
}

}
var foundCt = document.getElementById("popups").childNodes.length;
if (foundCt == 0) {
document.getElementById("searchField").className ="error";
}
if (foundCt == 1) {
document.getElementById("searchField").value = document.getElementById("popups").
firstChild.innerHTML;
document.getElementById("popups").innerHTML = "";
}
}
}
function makeChoice(evt) {
if (evt) {
var thisp = evt.target;
}
else {
var thisp = window.event.srcElement;
}
document.getElementById("searchField").value = thisp.innerHTML;
document.getElementById("popups").innerHTML = "";
}


Die Analyse sieht wie folgt aus:

1. Bitte geben Sie Ihr Bundesland ein:0c6dc11e160d3b678d68754cc175188a
8c7b2c6e19fe51d72be9be86566baba9
9336d54a9ef3754ef19d0704387dc78a 94b3e26ee717c64999d7867364b1b4a3
Dies ist der HTML-Code, auf den wir achten müssen. Das Besondere ist das Autocomplete-Attribut (dieses Attribut ist nicht standardkonform).
Es weist den Browser an, keine automatische Vervollständigung für dieses Feld durchzuführen, da wir die automatische Vervollständigung mit einem Skript durchführen. Wie XMLHttp-
Request wird die automatische Vervollständigung von allen Browsern gut unterstützt, obwohl sie nicht Teil der W3C-Empfehlungen ist.
2. document.getElementById("searchField").onkeyup = searchSuggest;
Um jeden Tastendruck zu erfassen und zu verarbeiten, ist ein Event-Handler erforderlich, der in initAll() gesetzt wird.
3. xhr.onreadystatechange =setStatesArray;
xhr.open("GET", "us-states.xml",true);
xhr.send(null);

4 .


if (xhr.responseXML) {
var allStates = xhr.responseXML.getElementsByTagName("item");
for (var i=0; i<allStates.length; i++) {
statesArray[i] = allStates[i].getElementsByTagName("label")[0].firstChild;
}
}


Wir lesen die Datei hier, sehen uns jeden Elementknoten an, suchen den Etikettenknoten und speichern das Etikett firstChild
(der Staatsname selbst). Jeder Statusname wird in einem Element im StatesArray-Array gespeichert.
5. var str = document.getElementById("searchField").value;
document.getElementById("searchField").className = "";
Wenn Sie mit der Eingabe in das Feld beginnen, wird es ausgeführt der Code im searchSuggest()-Ereignishandler. Ermitteln Sie zunächst den Wert von
searchField, also den bisher eingegebenen Informationen. Als nächstes löschen Sie das Klassenattribut dieses Feldes.

6. if (str != "") {
document.getElementById("popups").innerHTML = "";
Wenn keine Informationen eingegeben wurden, tun wir hier nichts Überprüfen Sie, ob der Benutzer einen Wert eingegeben hat,
und öffnen Sie dann eine Liste möglicher Werte. Wenn bereits einige Informationen eingegeben wurden, wird die Liste der vorherigen möglichen Werte gelöscht.
7. for (var i=0; ivar thisState = statesArray[i].nodeValue;
Durchlaufen Sie nun die Liste der Statusnamen und ändern Sie die aktuellen angesehen Der Statusname wird in thisState gespeichert.
8. if (thisState.toLowerCase().indexOf(str.toLowerCase())== 0) {
Wir wollen prüfen, ob das, was der Benutzer bisher eingegeben hat, Teil eines Staatsnamens ist – aber nur Damit nicht genug,
müssen wir auch darauf achten, dass die Eingabe am Anfang des Staatsnamens steht. Wenn Sie Kansas eingeben, möchten Sie schließlich nicht, dass im Dropdown-Feld Arkansas
oder Kansas angezeigt wird. Stellen Sie bei dieser Prüfung außerdem sicher, dass beide Zeichenfolgen Kleinbuchstaben sind, bevor Sie indexOf() überprüfen.
Wenn indexOf() 0 zurückgibt (d. h. die Eingabezeichenfolge wird am Anfang von thisState gefunden),
wissen wir, dass eine Übereinstimmung gefunden wurde.
9.


var tempp = document.createElement("p");
tempp.innerHTML = thisState;
tempp.onclick = makeChoice;
tempp.className = "suggestions";
document.getElementById("popups").appendChild(tempp);


Da dieser Staatsname ein möglicher Wert ist, möchten wir ihn dem hinzufügen Liste. Die Implementierungsmethode besteht darin, ein temporäres
p zu erstellen, dessen innerHTML auf den Statusnamen zu setzen, den Onclick-Handler und den Klassennamen hinzuzufügen und dann das gesamte p
zu den Popups p hinzuzufügen. Durch das Hinzufügen jedes Bundesstaatsnamens als separates p können wir jeden
Bundesstaatsnamen mithilfe von JavaScript und CSS bearbeiten.
10. varfoundCt = document.getElementById("popups").childNodes.length;
Nachdem wir alle Staatsnamen durchlaufen haben, müssen wir ein Popup-Fenster erstellen – aber wie viele Staatsnamen haben wir erhalten? Hier berechnen wir diesen
-Wert: FoundCt.
11. if (foundCt == 0) {
document.getElementById("searchField").className = "error";
}
Wenn FoundCt 0 ist, bedeutet dies, dass der Benutzer etwas Falsches eingegeben hat Inhalt. Wir setzen den Klassennamen auf Fehler, um den Benutzer
darüber zu informieren, dass er einen Fehler gemacht hat. Diese Einstellung führt dazu, dass das Eingabefeld einen hellgelben Hintergrund hat (dies wird durch die CSS-Stilregel in Skript 13-17 gesteuert).
12. 


if (foundCt == 1) {
document.getElementById("searchField").value = document.getElementById
➝("popups").firstChild.innerHTML;
document.getElementById("popups").innerHTML = "";
}


Wenn „foundCt“ 1 ist, wissen wir, dass eine eindeutige Übereinstimmung gefunden wurde, sodass wir konvertieren können Geben Sie den Namen des Staates in das Feld ein. Wenn der Benutzer
ca eingegeben hat, muss er Lifornia nicht eingeben, da wir bereits wissen, welchen Bundesstaat er eingeben möchte. Wir füllen das Eingabefeld mit dem eindeutigen p in den
-Popups aus, um automatisch den vollständigen Staatsnamen bereitzustellen, und löschen dann die Popups p.
13.


 function makeChoice(evt) {
if (evt) {
var thisp = evt.target;
}
else {

var thisp = window.event.srcElement;
}
document.getElementById("searchField").value = thisp.innerHTML;
document.getElementById("popups").innerHTML = "";
}


Eine andere Möglichkeit, einen Bundesstaatsnamen einzugeben, besteht darin, in der Popup-Liste auf einen Bundesstaat zu klicken. In diesem Fall wird der Event-Handler makeChoice() aufgerufen. Zuerst finden wir heraus, auf welchen Statusnamen der Benutzer geklickt hat, indem wir das Ziel des Ereignisses überprüfen, das einen bestimmten p bereitstellt.
Wenn Sie sich das innerHTML dieses p ansehen, erhalten Sie den Namen des Staates, und wir geben den Namen des Staates in das Eingabefeld ein. Löschen Sie abschließend die Popup-
-Liste möglicher Werte.

Verwandte Empfehlungen:

AJAX-Methode zum Implementieren der Bildvorschau und zum Hochladen und Generieren von Miniaturansichten

jquery und iframe Ermöglicht die gemeinsame Nutzung eines Ajax-Upload-Effekts.

Ajax überträgt Array-Parameterwerte an den Server. Detailliertes Beispiel

Das obige ist der detaillierte Inhalt vonBeispiel für Ajax zum automatischen Ausfüllen von Formularfeldern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Schritte zum Implementieren von TodoList mit ReactNächster Artikel：Detaillierte Schritte zum Implementieren von TodoList mit React

In Verbindung stehende Artikel

Mehr sehen