Home >Web Front-end >JS Tutorial >Ajax to automatically complete form fields example

Ajax to automatically complete form fields example

韦小宝Original: 2017-12-31 10:24:531738browse

This article mainly introduces how to use ajax to automatically complete form fields. Friends who are interested in ajax can refer to the example of ajax to automatically complete form fields!

Script one:

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

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 Three:

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

Analysis As follows:

1. Please enter your state:0c6dc11e160d3b678d68754cc175188a
3562d138e74919c720e2addfef1644f90c6dc11e160d3b678d68754cc175188a
< ;p id="popups"> 94b3e26ee717c64999d7867364b1b4a3
This is the HTML code we need to pay attention to. The special thing is the autocomplete attribute (this attribute is non-standard compliant).
It tells the browser not to perform any auto-completion on this field, since we will handle the auto-completion with a script. Like XMLHttp-
Request, autocomplete is well supported across browsers, although it is not part of any W3C recommendations.
2. document.getElementById("searchField").onkeyup = searchSuggest;
In order to capture and process each keystroke, an event handler is required, which is set in 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;
}
}

We read the file here, view each item node, find the label node, and store the firstChild of the label
(state name itself). Each state name is stored in an element in the statesArray array.
5. var str = document.getElementById("searchField").value;
document.getElementById("searchField").className = "";
When you start inputting in the field, it will Execute the code in the searchSuggest() event handler. First get the value of
searchField, which is the information that has been entered so far. Next, clear the class attribute of this field.

6. if (str != "") {
document.getElementById("popups").innerHTML = "";
If no information has been entered, nothing will be done. So here we check to make sure the user has entered a value,
and then pop up a list of possible values. If some information has already been entered, the list of previous possible values is cleared.
7. for (var i=0; ivar thisState = statesArray[i].nodeValue;
Now, iterate through the list of state names and change the currently viewed The state name is stored in thisState.
8. if (thisState.toLowerCase().indexOf(str.toLowerCase())== 0) {
We want to check if what the user has entered so far is part of a state name - but only This is not enough, we
must also ensure that the entered content is at the beginning of the state name. After all, if you enter Kansas, you don't want the drop-down box to display Arkansas
or Kansas. Also, when doing this check, make sure both strings are lowercase before checking indexOf().
If indexOf() returns 0 (that is, the input string is found at the beginning of thisState), then we
know that a match has been found.
9.

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

Because this state name is a possible value, we want to add it to the list to be displayed . The implementation method is to create a temporary
p, set its innerHTML to the state name, add the onclick handler and className, and then add the entire p to the popups p. Adding each state name as a separate p allows us to manipulate each
state name using JavaScript and CSS.
10. var foundCt = document.getElementById("popups").childNodes.length;
After traversing all the state names, we need to create a pop-up window - but how many state names did we get? Here we calculate these
values: foundCt.
11. if (foundCt == 0) {
document.getElementById("searchField").className = "error";
}
If foundCt is 0, it means the user entered the wrong content. We set the className to error to let the user
know that they made a mistake. This setting causes the input field to display a light yellow background (this is controlled by the CSS style rule in Script 13-17).
12.

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

If foundCt is 1, we know that we have found the only match, so we can change the state name to into the field. If the user has

already entered ca, they don't need to enter lifornia because we already know which state they want to enter. We automatically provide the full state name by filling in the input field with the unique p in
popups, and then clear the 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 = "";
}

Another way to enter a state name is to click on a state name in the pop-up list. In this case, the makeChoice() event handler
is called. First, we find out which state name the user clicked by checking the target of the event, which provides a specific p.
Viewing the innerHTML of this p will provide the state name, and we put the state name into the input field. Finally, clear the popup
list of possible values.

Related recommendations:

AJAX method to implement image preview and upload and generate thumbnails

jquery and iframe makes an ajax upload effect example sharing

Ajax transfers array parameter value to the server example detailed explanation

The above is the detailed content of Ajax to automatically complete form fields example. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed steps to implement TodoList with ReactNext article：Detailed steps to implement TodoList with React

See more

Ajax to automatically complete form fields example

Related articles