Ajax to automatically complete form fields example

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:

      
  
 Please enter your state:
 
 
 
 
  

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

         Copy after login
        
       

Analysis As follows:

1. Please enter your state:



< ;p id="popups">

4 .

if (xhr.responseXML) { var allStates = xhr.responseXML.getElementsByTagName("item"); for (var i=0; i
        

         Copy after login
        
       

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

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!