ASP模仿google suggest风格实现下拉菜单效果

今天和大家一起利用ASP模仿实现google suggest风格的下拉菜单，直接上代码

1.前台代码：

<%@LANGUAGE=\”JAVASCRIPT\” CODEPAGE=\”936\”%>
<!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\”>
<style type=\”text/css\”>
<!–
.style1 {color: #FF0000}
.mouseOut
{
font-size:12px;
background: #708090;
color: #FFFAFA;
}
　　
.mouseOver
{
font-size:12px;
background: #FFFAFA;
color: #000000;
}
–>
</style>
　　 <script type=\”text/javascript\” language=\”javascript\”>
　　　　var xmlHttp;
　　　　var completeDiv;
　　　　var inputField;
　　　　var nameTable;
　　　　var nameTableBody;
　　　　var flag=false;
　　
　　　　function createXMLHttpRequest() {
　　　　　　if (window.ActiveXObject) {
　　　　　　　　xmlHttp = new ActiveXObject(\”Microsoft.XMLHTTP\”);
　　　　　　}
　　　　　　else if (window.XMLHttpRequest) {
　　　　　　　　xmlHttp = new XMLHttpRequest();　　　　　　　　
　　　　　　}
　　　　}
　　　　
　　　　function setflag(){
　　　　　　flag = true;
　　　　}
　　　　
　　　　function DisSelect()
　　　　{
　　　　　　if(flag==false)
　　　　　　document.getElementById(\”popup\”).style.display=\”none\”;
　　　　}
　　
　　　　function initVars() {
　　　　　　inputField = document.getElementById(\”frmchangshang\”);　　　　　　
　　　　　　nameTable = document.getElementById(\”name_table\”);
　　　　　　completeDiv = document.getElementById(\”popup\”);
　　　　　　nameTableBody = document.getElementById(\”name_table_body\”);
　　　　　　document.getElementById(\”popup\”).style.display=\”block\”;
　　　　}
　　
　　　　function findNames() {
　　　　　　initVars();
　　　　　　if (inputField.value.length > 0)
　　{
　　　　　　　　createXMLHttpRequest();
　　　　　　　　var url = \”search.asp?names=\” + 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)
　　　　　　　　{
　　 try
　　　　　　　　　　{
　　　　　　　　　　　　var name = xmlHttp.responseXML.getElementsByTagName(\”name\”)

[0].firstChild.data;
　　　　　　　　　　}
　　　　　　　　　　catch(e)
　　　　　　　　　　{
　　　　　　　　　　　　document.getElementById(\”popup\”).style.display=\”none\”;
　　　　　　　　　　　　clearNames();
　　　　　　　　　　}
　　　　　　　　　　setNames(xmlHttp.responseXML.getElementsByTagName(\”content\”));
　　　　　　　　}
　　　　　　　　else if (xmlHttp.status == 204)
　　　　　　　　{
　　　　　　　　　　clearNames();
　　　　　　　　}
　　　　　　}
　　　　}
　　　　
　　　　function setNames(the_names) {　　　　　　
　　　　　　clearNames();
　　　　　　var size = the_names.length;
　　　　　　setOffsets();
　　　　　　var row,cell,spans;
　　　　　　for (var i = 0; i < size; i++) {
　　　　　　　　//var nextNode = the_names[i].firstChild.data;
　　var e = the_names[i];
　　//取得子节点内容，重新装载为数组
　　var nextNode=e.getElementsByTagName(\”name\”)[0].firstChild.data;
　　//创建tr，td，span元素
　　　　　　　　row　=document.createElement(\”tr\”);
　　　　　　　　cell =document.createElement(\”td\”);
　　//spans=document.createElement(\”span\”);
　　//设置cell属性
　　　　　　　　cell.onmouseout = function() {this.className=\’mouseOver\’; flag=false;};
　　　　　　　　cell.onmouseover = function() {this.className=\’mouseOut\’; flag=true;};
　　　　　　　　cell.setAttribute(\”bgcolor\”,\”#FFFAFA\”);
　　　　　　　　cell.setAttribute(\”border\”,\”0\”);
　　　　　　　　//cell.setAttribute(\”onmouseover\”,\”setflag()\”);
　　　　　　　　cell.onclick = function() { populateName(this); };
　　//将nextNode添加到td
　　var txtName = document.createTextNode(nextNode);
　　cell.appendChild(txtName);
　　//装载隐藏数据到span元素
　　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=\”400px\”;
　　　　}
　　　　
　　　　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) {
　　//填充数据到web页面，cell—->td对象
　　　　　　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>
<head>
<meta http-equiv=\”Content-Type\” content=\”text/html; charset=gb2312\” />
<title>Untitled Document</title>
</head>
　　
<body>
<input name=\”frmchangshang\” class=\”InputText\” id=\”frmchangshang\”　style=\”width:250px;\”

onBlur=\”DisSelect();\” onKeyUp=\”findNames();\” size=\”50\” maxlength=\”100\”>
　　　　　　　　　　 <span class=\”style1\”>提示：输入关键字，程序自动从库中匹配您

要找的记录，如果不存在自行填写
　　　　 </span>
　　　　　　　　　　<div style=\”position:absolute;top:0;left:0;\” id=\”popup\”>
　　　　　　　　　　　　<table id=\”name_table\” bgcolor=\”#FFFAFA\” border=\”0\” cellspacing=\”0\”

cellpadding=\”0\”>　　　　　　
　　　　　　　　　　　　　　<tbody id=\”name_table_body\”></tbody>
　　　　　　　　　　　　</table>
　　　　　　　　　</div>
</body>
</html>

2.后台search.asp异步查询数据页面
把sql语句和要显示的字段改为自己的数据库相对应格式就可以了。

<!–#include virtual=\”conn.asp\” –>
<%
keyword=request.QueryString(\”names\”)
sql=\”select lgid,lgmc from lg where lgmc like \’%\”&keyword&\”%\’ order by lgid desc\”
set rs=server.CreateObject(\”adodb.recordset\”)
rs.open sql,conn,1,1
Response.ContentType=\”text/xml\”　　
response.Write \”<?xml version=\”\”1.0\”\” encoding=\”\”GB2312\”\” ?>\”
response.Write \”<response>\”
do while not rs.eof
response.Write \”<content>\”
response.Write \”<name>\”&rs(\”lgmc\”)&\”</name>\”
\’response.Write \”<userid>\”&rs(\”userid\”)&\”</userid>\”
\’response.Write \”<startime>\”&rs(\”startime\”)&\”</startime>\”
\’response.Write \”<endtime>\”&rs(\”endtime\”)&\”</endtime>\”
response.Write \”</content>\”
rs.movenext
loop
response.Write \”</response>\”
rs.close
set rs=nothing
%>