Ajax自动补全（仿百度功能） -

xiaoyaolong

浏览: 28985 次
性别:
来自: 湖南

最近访客更多访客>>

lm18238818077

小俊制作

qin_ban

ailu5949

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ajax自动补全（仿百度功能）

百度 Ajax IE XHTML HTML

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>搜索</title>
<style type="text/css">

</style>
</head>

<script language="javascript">
function $(d){return document.getElementById(d);}
var IE=new Function('','if(navigator.appName.indexOf("Explorer")>=0)return true;if(navigator.appName.indexOf("Netscape")>=0)return false');
var sou = function ()
{
var shuru = $("wd");
var shuchu = $("ss");
var sxPress = false ;
var oldValue;
shuchu.onmouseover = function (e)
{
e||(e=window.event);
var eveSrc = (typeof e.target != "undefined")?e.target:e.srcElement;
eveSrc = eveSrc.tagName=="SPAN"?eveSrc.parentNode:eveSrc;
if(eveSrc.tagName=="LI")
{
var eveParent = eveSrc.parentNode;
for(i=0;i<eveParent.childNodes.length;i++)
eveParent.childNodes[i].className = "";
eveSrc.className="hov";
}
}//end onmouseover
function down(e)
{
e||(e=window.event);
var eveSrc = (typeof e.target != "undefined")?e.target:e.srcElement;
if(eveSrc.tagName=="LI"){
   if(eveSrc.parentNode.parentNode.id=="ss")
{
    //shuru.value = eveSrc.firstChild.data;
    document.forms["form1"].submit();
return;
   }
}
if(eveSrc==shuru)return;
shuchu.style.visibility="hidden";
}//end down
document.onmousedown = down;
shuru.onkeydown = function (e)
{
   e||(e=window.event);
    switch(e.keyCode){
case 40:
if(shuchu.style.visibility=="hidden")return;
sxPress = true;
var ele = shuchu.firstChild.childNodes;
var thisEle = new Object();
for(i=0;i<ele.length;i++)
if(ele[i].className=="hov")
{thisEle = ele[i];break;}
if(typeof thisEle.className=="undefined")
{
thisEle = ele[0];
thisEle.className = "hov";
shuru.value=thisEle.firstChild.data;
return;
}
thisEle.className = "";
if(thisEle==ele[ele.length-1]){shuru.value = oldValue; return;}
shuru.value = thisEle.nextSibling.firstChild.data;
thisEle.nextSibling.className = "hov";
      break;

case 38:
if(shuchu.style.visibility=="hidden")return;
sxPress = true;
var ele = shuchu.firstChild.childNodes;
var thisEle = new Object();
for(i=0;i<ele.length;i++)
if(ele[i].className=="hov")
{thisEle = ele[i];break;}
if(typeof thisEle.className=="undefined")
{
thisEle = ele[ele.length-1];
thisEle.className = "hov";
shuru.value=thisEle.firstChild.data;
return;
}
thisEle.className = "";
if(thisEle==ele[0]){shuru.value = oldValue; return;}
shuru.value = thisEle.previousSibling.firstChild.data;
thisEle.previousSibling.className = "hov";
break;

default:
if(!IE())
change();
sxPress = false;
break;
}
}//end onkeyup
if(IE())shuru.onpropertychange = change;
function change ()//生成相关搜索
{
if(!sxPress)oldValue = shuru.value;
else return;
if(shuru.value!=""){//这里胡乱生成的相关搜索；
      var str = "";
for(i=0;i<10;i++)
{
str +="<li>" +shuru.value+i+"<span>"+Math.floor(Math.random()*1000)+"个搜索结果</span></li>";
}
shuchu.style.visibility = "visible";
shuchu.innerHTML = "<ul>"+str+"</ul>";
}else{
shuchu.style.visibility = "hidden";
}
}//end change
}
window.onload = function ()
{sou();}
</script>

<body>
<p><img src="http://www.baidu.com/img/logo.gif" /></p>
<p> </p>
<form id="form1" name="form1" method="get" action="http://www.baidu.com/s">
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td width="330">
在这里输入试试，支持键盘上下键选择
   <div id="s">
      <input name="wd" type="text" id="wd" size="50" maxlength="30" autocomplete="off" />
      <div id="ss">
</div> </div>
    </td>
    <td width="170"> <input type="submit" name="Submit" value="百度一下" /></td>
</tr>
</table>
</form>
</body>
</html>

分享到：