今天和大家一起利用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
%>
以上就是ASP模仿google suggest风格实现下拉菜单效果的代码,希望对大家的学习有所帮助。
您可能感兴趣的文章:
- Google Suggest 😉 基于js的动态下拉菜单
- ASP+JS三级联动下拉菜单[调用数据库数据]
- AJAX实现仿Google Suggest效果
- 仿google搜索提示 SuggestFramework的使用
- ASP.NET 2.0写无限级下拉菜单
- ajax Suggest类似google的搜索提示效果
- google suggest 下拉菜单实现代码(asp.net版本)
- asp.net DropDownList 三级联动下拉菜单实现代码