日期:2014-05-18 浏览次数:20958 次
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<head>
<title>Ajax Auto Complete</title>
<!--设置鼠标的样式表-->
<style type="text/css">
.mouseOut {
background: #708090;
color: #FFFAFA;
}
.mouseOver {
background: #FFFAFA;
color: #000000;
}
</style>
<script type="text/javascript" charset="GBK">
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");//div
nameTableBody = document.getElementById("name_table_body");//tbody
}
function findNames() {
initVars();//初始化变量
if (inputField.value.length > 0) {//如果文本框有内容就用Ajax获得数组XML
createXMLHttpRequest();
var url = "/test/autocompletesrv?names=" + inputField.value + "&timeStamp=" + new Date().getTime();
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
} else {//清空tbody,并将div的style设为不可见
clearNames();
}
}
function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
var name = xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data;
alert(name);
setNames(xmlHttp.responseXML.getElementsByTagName("name"));
} else if (xmlHttp.status == 204){//清空tbody,并将div的style设为不可见
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;
com