<%@LANGUAGE=
"JAVASCRIPT"
CODEPAGE=
"936"
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<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>
|
模仿google suggest 下拉菜单
最新推荐文章于 2024-09-11 12:01:27 发布