用AJAX实现google输入自动完成的简单模拟

本文链接：https://blog.csdn.net/hexiankun/article/details/3422137

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>输入自动完成</title>
<script language="javascript">
//输入信息的文本框
var txtInput;
//下拉表当前选中项的索引
var currentIndex = -1;

//初始化参数,和下拉表位置
function initPar()
{
txtInput = document.getElementById("txtCompanyName");
//设置下拉表相对于文本输入框的位置
setPosition();
}

//设置下拉表相对于文本输入框的位置
function setPosition()
{
var width = txtInput.offsetWidth;
var left = getLength("offsetLeft");
var top = getLength("offsetTop") + txtInput.offsetHeight;

divContent.style.left = left + "px";
divContent.style.top = top + "px";
divContent.style.width = width + "px";
}

//获取对应属性的长度
function getLength(attr)
{
var offset = 0;
var item = txtInput;
while (item)
{
offset += item[attr];
item = item.offsetParent;
}
return offset;
}

//自动完成
function autoComplete()
{
//如果按下向上, 向下或回车
if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13)
{
//选择当前项
selItemByKey();
}
else //向服务器发送请求
{
//如果值为空
if (txtInput.value == "")
{
divContent.style.display='none';
return;
}
//恢复下拉选择项为 -1
currentIndex = -1;

//开始请求
requestObj = new ActiveXObject("Microsoft.XMLHTTP");
requestObj.onreadystatechange = displayResult;
requestObj.open("POST", "AutoComplete.aspx?ts=" + new Date().toLocaleString(), true);
requestObj.send(txtInput.value);
}
}

//显示结果
function displayResult()
{
if (requestObj.readyState == 4)
{
showData();
divContent.style.display = "";
}
}

//显示服务器返回的结果 ,并形成下拉表
function showData()
{
//获取数据
var doc = new ActiveXObject("MSXML2.DOMDocument.3.0");
doc.loadXML(requestObj.responseText);

//显示数据的xslt
var docStyle = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
docStyle.async = false;
docStyle.load("list.xslt");

var docTemplate = new ActiveXObject("MSXML2.XSLTemplate");
docTemplate.stylesheet = docStyle;

//通过xslt转换xml数据
var processor = docTemplate.createProcessor();
processor.input = doc;
processor.transform();
var res = processor.output;

//显示转后后的结果
divContent.innerHTML = res;
}

//通过键盘选择下拉项
function selItemByKey()
{
//下拉表
var tbl = document.getElementById("tblContent");
if (!tbl)
{
return;
}
//下拉表的项数
var maxRow = tbl.rows.length;
//向上
if (event.keyCode == 38 && currentIndex > 0)
{
currentIndex--;
}
//向下
else if (event.keyCode == 40 && currentIndex < maxRow-1)
{
currentIndex++;
}
//回车
else if (event.keyCode == 13)
{
selValue();
return;
}

clearColor();
txtInput.value = tbl.rows[currentIndex].innerText;
//设置当前项背景颜色为blue 标记选中
tbl.rows[currentIndex].style.backgroundColor = "InfoBackground";
}

//清除下拉项的背景颜色
function clearColor()
{
var tbl = document.getElementById("tblContent");
for (var i = 0; i < tbl.rows.length; i++)
{
tbl.rows[i].style.backgroundColor = "";
}
}

//选择下拉表中当前项的值 ,用于按回车或鼠标单击选中当前项的值
function selValue()
{
if (event.keyCode != 13)
{
var text = event.srcElement.innerText;
txtInput.value = text;
}
initList();
}

//文本框失去焦点时设置下拉表可见性
function setDisplay()
{
//获取当前活动td的表格
if (document.activeElement.tagName == "TD")
{
var tbl = document.activeElement.parentElement.parentElement.parentElement;
//如果不是下拉表,则隐藏下拉表
if (tbl.id != "tblContent")
{
initList();
}
return;
}

initList();

}

function initList()
{
divContent.style.display='none';
divContent.innerHTML = "";
currentIndex = -1;
}
</script>
</head>
<body οnlοad="initPar()">
CompanyName<input type="text" id="txtCompanyName" οnkeyup="autoComplete()" οnblur="setDisplay();" style="width:400px"/>

<div id="divContent" style="display:none; position:absolute; ">
</div>
</body>
</html>