Exemple d'Ajax pour remplir automatiquement les champs de formulaire-js tutoriel-php.cn

Exemple d'Ajax pour remplir automatiquement les champs de formulaire

韦小宝

Libérer： 2017-12-31 10:24:53

original

1668 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

L'analyse est la suivante :

1 Veuillez entrer votre état :

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Exemple d'Ajax pour remplir automatiquement les champs de formulaire