Ajax to automatically complement the full form field sample _ajax related

Source:

Script one:

<! DOCTYPE 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 ' t create an XMLHttpRequest");} function Setstatesarray () {if (xhr.readystate = = 4) {if (Xhr.status =) {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 is 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 tempdiv = document.createelement ("div"); tempdiv.innerhtml = Thisstate;
Tempdiv.onclick = Makechoice;
Tempdiv.classname = "suggestions";
document.getElementById ("popups"). AppendChild (Tempdiv);
} var foundct = document.getElementById ("popups"). Childnodes.length; if (FOUNDCT = = 0) {document.getElementById ("Searchfield"). ClassName = "error";} if (FOUNDCT = 1) {Document.getelementby
Id ("Searchfield"). Value = document.getElementById ("popups").
firstchild.innerhtml;
document.getElementById ("popups"). InnerHTML = "";}}} function Makechoice (evt) {if (evt) {var thisdiv = Evt.target;} else {var thisdiv = window.event.srcElement;} document
. getElementById ("Searchfield"). Value = thisdiv.innerhtml; document.getElementById ("popups"). InnerHTML = "";}

The analysis is as follows:

1. Please enter your state:<br>
<input type= "text" id= "Searchfield" autocomplete= "Off" ><br>
<div id= "popups" > </div>
This is the HTML code we want to pay attention to. The special part of this is the AutoComplete property (this property is nonstandard compatible).
It tells the browser not to perform any automatic completion on this field because we will use the script to process the automatic completion. and xmlhttp-
As a request, although AutoComplete is not part of any of the consortium's recommendations, it is well supported across browsers.
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, look at each item node, look for the label node, and store the label's FirstChild
(state name itself). Each state name is stored in an element of the Statesarray array.
5. var str = document.getElementById ("Searchfield"). Value;
document.getElementById ("Searchfield"). ClassName = "";
When you start entering in a field, the code in the Searchsuggest () event handler is executed. First get
The value of the Searchfield, which is the information that has been entered so far. Next, empty the class attribute of the field.

6. if (str!= "") {
document.getElementById ("popups"). InnerHTML = "";
If you haven't entered any information yet, don't do anything, so check here to make sure that the user has entered a value
Then the list of possible values pops up. If you have already entered some information, clear the list of previous possible values.
7. for (var i=0; i<statesarray.length; i++) {
var thisstate = Statesarray[i].nodevalue;
Now, iterate through the list of state names and store the currently viewed state name in Thisstate.
8. if (Thisstate.tolowercase (). IndexOf (Str.tolowercase ()) = = 0) {
We want to check if the user's input so far is part of a state name--but that's not enough, we
You must also make sure that the entered content is at the beginning of the state name. After all, if you enter a Kansas, you do not want the dropdown box to display Arkansas
or Kansas. Also, make sure that two strings are lowercase before checking indexof () for this check.
If indexof () returns 0 (that is, the input string is found at the beginning of the thisstate), then we
Just know that a match was found.
9.

var tempdiv = document.createelement ("div");
tempdiv.innerhtml = thisstate;
Tempdiv.onclick = Makechoice;
Tempdiv.classname = "suggestions";
document.getElementById ("popups"). AppendChild (Tempdiv);

Because the 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
Div, set its innerhtml to this state name, add the onclick handler and classname, and then chase the entire Div
Add to the Popups Div. Add each state name as a separate div so that we can use JavaScript and CSS to manipulate every
A state name.
var foundct = document.getElementById ("popups"). Childnodes.length;
After all the state names are traversed, we're going to create a pop-up window--but how many states do we get? Here's the calculation of this
Value: FOUNDCT.
One. if (FOUNDCT = 0) {
document.getElementById ("Searchfield"). ClassName = "error";
}
If the FOUNDCT is 0, the user has entered the wrong content. We set the classname to error so that the user
Knowing that the input is wrong, this setting causes the input field to display a light yellow background (which 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 we've found a unique match, so we can put the state name in the field. If the user has
Once the CA is entered, they don't have to enter the Lifornia, because we already know which state they want to enter. We use
The only div in popups fills in the input field, automatically providing the full state name, and then emptying the popups Div.
13.

 function Makechoice (evt) {
if (evt) {
var thisdiv = evt.target;
}
else {

var thisdiv = window.event.srcElement;
}
document.getElementById ("Searchfield"). Value = thisdiv.innerhtml;
document.getElementById ("popups"). InnerHTML = "";
}

Another way to enter a state name is to click a state name in the pop-up list. In this case, the Makechoice () event is invoked
Pieces of processing program. First, we check the target of the event to find out which state the user clicked, which provides a specific div.
The innerhtml of this div will provide the state name, and we'll put the state name in the input field. Finally, empty the possible values of the pop-up
List.