Maison > Article > interface Web > Exemple d'Ajax pour remplir automatiquement les champs de formulaire

Exemple d'Ajax pour remplir automatiquement les champs de formulaire

韦小宝original: 2017-12-31 10:24:531713parcourir

Cet article présente principalement comment utiliser ajax pour remplir automatiquement les champs de formulaire. Les amis qui sont intéressés par ajax peuvent se référer à l'exemple d'ajax pour remplir automatiquement les champs de formulaire !

Script un :

<!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>

Script deux :

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;
}

Script trois :

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 = "";
}

L'analyse est la suivante :

1 Veuillez entrer votre état :0c6dc11e160d3b678d68754cc175188a
94a24cc44fce91d4c7f70959f1b60027
9336d54a9ef3754ef19d0704387dc78a 94b3e26ee717c64999d7867364b1b4a3
C'est le code HTML auquel nous devons prêter attention. La particularité est l'attribut de saisie semi-automatique (cet attribut n'est pas conforme aux normes).
Il indique au navigateur de ne pas effectuer d'auto-complétion sur ce champ, puisque nous gérerons l'auto-complétion avec un script. Comme XMLHttp-
Request, la saisie semi-automatique est bien prise en charge dans tous les navigateurs, bien qu'elle ne fasse partie d'aucune recommandation du W3C.
2. document.getElementById("searchField").onkeyup = searchSuggest;
Afin de capturer et de traiter chaque frappe, un gestionnaire d'événements est requis, qui est défini dans initAll().
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;
}
}

Nous lisons le fichier ici, visualisons chaque nœud d'élément, trouvons le nœud d'étiquette et stockons l'étiquette firstChild
(le nom de l'État lui-même). Chaque nom d'état est stocké dans un élément du tableau statesArray.
5. var str = document.getElementById("searchField").value;
document.getElementById("searchField").className = "";
Lorsque vous commencerez à saisir dans le champ, il s'exécutera le code dans le gestionnaire d'événements searchSuggest(). Obtenez d’abord la valeur de
searchField, qui correspond aux informations qui ont été saisies jusqu’à présent. Ensuite, effacez l'attribut class de ce champ.

6. if (str != "") {
document.getElementById("popups").innerHTML = "";
Si aucune information n'a été saisie, ne faites rien. vérifiez que l'utilisateur a saisi une valeur,
, puis affichez une liste de valeurs possibles. Si certaines informations ont déjà été saisies, la liste des valeurs possibles précédentes est effacée.
7. for (var i=0; ivar thisState = statesArray[i].nodeValue;
Maintenant, parcourez la liste des noms d'état et modifiez le nom actuel. visualisé Le nom de l'état est stocké dans thisState.
8. if (thisState.toLowerCase().indexOf(str.toLowerCase())== 0) {
Nous voulons vérifier si ce que l'utilisateur a entré jusqu'à présent fait partie d'un nom d'état - mais seulement Cela ne suffit pas, nous
devons également nous assurer que la saisie se trouve au début du nom de l'état. Après tout, si vous tapez Kansas, vous ne voulez pas que la liste déroulante affiche Arkansas
ou Kansas. De plus, lors de cette vérification, assurez-vous que les deux chaînes sont en minuscules avant de vérifier indexOf().
Si indexOf() renvoie 0 (c'est-à-dire que la chaîne d'entrée est trouvée au début de thisState), alors nous
savons qu'une correspondance a été trouvée.
9.

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

Parce que ce nom d'état est une valeur possible, nous souhaitons l'ajouter au dans le liste. La méthode d'implémentation consiste à créer un
p temporaire, à définir son innerHTML sur le nom de l'état, à ajouter le gestionnaire onclick et le className, puis à ajouter l'intégralité du p
au popups p. L'ajout de chaque nom d'état en tant que p distinct nous permet de manipuler chaque
nom d'état à l'aide de JavaScript et CSS.
10. var foundCt = document.getElementById("popups").childNodes.length;
Après avoir parcouru tous les noms d'état, nous devons créer une fenêtre contextuelle - mais combien de noms d'état avons-nous obtenu ? Ici, nous calculons cette
valeur : foundCt.
11. if (foundCt == 0) {
document.getElementById("searchField").className = "error";
>
Si foundCt est 0, cela signifie que l'utilisateur a saisi une erreur. contenu. Nous définissons le className sur error pour informer l'utilisateur
qu'il a fait une erreur. Ce paramètre donne au champ de saisie un fond jaune clair (ceci est contrôlé par la règle de style CSS dans le script 13-17).
12.

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

Si foundCt est 1, nous savons qu'une correspondance unique a été trouvée, nous pouvons donc convertir ceci Mettez le nom de l'état dans le champ. Si l'utilisateur a déjà
entré ca, il n'a pas besoin d'entrer en Lifornie car nous savons déjà dans quel état il veut entrer. Nous remplissons le champ de saisie en utilisant le p unique dans les popups
pour fournir automatiquement le nom complet de l'état, puis effaçons les 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 = "";
}

Une autre façon de saisir le nom d'un état consiste à cliquer sur un nom dans la liste contextuelle. Dans ce cas, le gestionnaire d'événements makeChoice() est appelé. Tout d’abord, nous découvrons sur quel nom d’état l’utilisateur a cliqué en vérifiant la cible de l’événement, qui fournit un p.
L'affichage du innerHTML de ce p fournira le nom de l'état, et nous mettrons le nom de l'état dans le champ de saisie. Enfin, effacez la liste contextuelle
des valeurs possibles.

Recommandations associées :

Méthode AJAX pour implémenter l'aperçu et le téléchargement d'images et générer des vignettes

jquery et iframe fait un exemple de partage d'effet de téléchargement ajax

Ajax transfère la valeur du paramètre de tableau à l'exemple détaillé du serveur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Étapes détaillées pour implémenter TodoList avec ReactArticle suivant：Étapes détaillées pour implémenter TodoList avec React

Articles Liés

Voir plus