您的位置：首页 > 编程语言

自动完成提示框的实现示例代码

2008-11-05 15:12 691 查看

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">



</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语句和要显示的字段改为自己的数据库相对应格式就可以了。



<%

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

%>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航