Ajax Basics Tutorial (4)-Implementing basic AJAX Technology 4.9 providing automated completion

One of the most popular features we encounter is automatic completion. Many people have used tools such as Intuit's Quicken and are fascinated by the functionality of its registry, which fills in information based on previous entries. This makes data entry faster, easier, and less error-prone. Adding this functionality may be easy for a FAT customer application, but web apps have not had this feature for a long time [1]. However, Google's launch of Google suggest in its beta labs shows that AutoComplete is not remote for Web applications.

Google suggest is really amazing (see figure 4-16). Not only does it nicely place the drop down area, it also automatically inserts the most likely answer in the input box, and places the parts that are not user-typed into gray, and even the up and down arrows in the drop down area. By providing some results for a given item, the user becomes more aware of the results that might be obtained when the search is completed.

Many sites have made an analysis of Google suggest (Google suggest! can be found on google) ）。 The example shown in Listing 4-17 is not as rich as Google suggest, but you do know what you can do with Ajax. Note that in this example, the callback () function also looks for return code 204 in addition to finding a generic return code of 200. The 204 response code instructs the server not to send back any information, using a hint to empty the name dropdown area. You'll also notice that you set the mouse event for the cell by using the dot notation, which in the preceding "Why can't you set the event handler for the Delete button with the SetAttribute method?" "The side note has already been explained. Once again, use the Calculateoffset () method to determine where the data should be placed.

Figure 4-16 Ajax adds a lot to Google suggest

Code Listings 4-17 autocomplete.html

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title>ajax Auto complete</title>
<style type= "Text/css" >
. mouseout {
Background: #708090;
Color: #FFFAFA;
}
. mouseOver {
Background: #FFFAFA;
Color: #000000;
}
</style>
<script type= "Text/javascript" >
var xmlHttp;
var Completediv;
var Inputfield;
var nametable;
var nametablebody;
function Createxmlhttprequest () {
if (window. ActiveXObject) {
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
else if (window. XMLHttpRequest) {
XmlHttp = new XMLHttpRequest ();
}
}
function Initvars () {
Inputfield = document.getElementById ("names");
NameTable = document.getElementById ("name_table");
Completediv = document.getElementById ("popup");
Nametablebody = document.getElementById ("Name_table_body");
}
function Findnames () {
Initvars ();
if (InputField.value.length > 0) {
Createxmlhttprequest ();
var url = "autocompleteservlet?names=" + Escape (inputfield.value);
Xmlhttp.open ("Get", url, True);
Xmlhttp.onreadystatechange = callback;
Xmlhttp.send (NULL);
} else {
Clearnames ();
}
}
function callback () {
if (xmlhttp.readystate = = 4) {
if (Xmlhttp.status = = 200) {
var name =
Xmlhttp.responsexml
. getElementsByTagName ("name") [0].firstchild.data;
Setnames (XmlHttp.responseXML.getElementsByTagName ("name"));
else if (Xmlhttp.status = 204) {
Clearnames ();
}
}
}
function Setnames (the_names) {
Clearnames ();
var size = The_names.length;
Setoffsets ();
var row, cell, Txtnode;
for (var i = 0; i < size; i++) {
var nextnode = The_names[i].firstchild.data;
row = Document.createelement ("tr");
Cell = document.createelement ("TD");
Cell.onmouseout = function () {this.classname= ' mouseOver ';};
Cell.onmouseover = function () {this.classname= ' mouseout ';};
Cell.setattribute ("bgcolor", "#FFFAFA");
Cell.setattribute ("Border", "0");
Cell.onclick = function () {populatename (this);
Txtnode = document.createTextNode (NextNode);
Cell.appendchild (Txtnode);
Row.appendchild (cell);
Nametablebody.appendchild (row);
}
}
function Setoffsets () {
var end = Inputfield.offsetwidth;
var left = Calculateoffsetleft (Inputfield);
var top = calculateoffsettop (Inputfield) + inputfield.offsetheight;
CompleteDiv.style.border = "Black 1px solid";
CompleteDiv.style.left = left + "px";
CompleteDiv.style.top = top + "px";
NameTable.style.width = end + "px";
}
function Calculateoffsetleft (field) {
Return Calculateoffset (field, "offsetleft");
}
function calculateoffsettop (field) {
Return Calculateoffset (field, "offsettop");
}
function Calculateoffset (field, attr) {
var offset = 0;
while (field) {
Offset + + field[attr];
field = Field.offsetparent;
}
return offset;
}
function Populatename (cell) {
Inputfield.value = Cell.firstChild.nodeValue;
Clearnames ();
}
function Clearnames () {
var ind = NameTableBody.childNodes.length;
for (var i = ind-1 i >= 0; i--) {
Nametablebody.removechild (Nametablebody.childnodes[i]);
}
CompleteDiv.style.border = "None";
}
</script>
<body>
Names: <input type= "text" size= "id="
Onkeyup= "Findnames ();" style= "HEIGHT:20;" />
<div style= "Position:absolute" id= "Popup" >
<table id= "name_table" bgcolor= "#FFFAFA" border= "0"
cellspacing= "0" cellpadding= "0"/>
<tbody id= "Name_table_body" ></tbody>
</table>
</div>
</body>