Ajax自动补全（仿百度效能）
日期：2014-05-16 浏览次数：20688 次
Ajax自动补全（仿百度功能）
<!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">
<!--
* {margin: 0px;padding: 0px;}
body {
text-align: center;
padding-top: 100px;
font-size: 12px;
}
table {margin: auto;}
#wd {width: 350px;}
div#s {position: relative;}
div#ss {position: absolute;width: 352px;visibility: hidden;left: 0px;top: 20px;}
div#ss ul {border: 1px solid #000000;text-align: left;}
div#ss li {
position: relative;
width: 100%;
background-color: #FFFFFF;
cursor: default;
line-height: 18px;
text-indent: 2px;
}
div#ss li.b {background-color: #6666FF;color: #FFFFFF;}
div#ss li.hov span {color: #99FFFF;}
div#ss li span {color: #009900;position: absolute;top: 0px;right: 2px;}
UL {list-style-type: none;}
-->
</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";
<!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">
<!--
* {margin: 0px;padding: 0px;}
body {
text-align: center;
padding-top: 100px;
font-size: 12px;
}
table {margin: auto;}
#wd {width: 350px;}
div#s {position: relative;}
div#ss {position: absolute;width: 352px;visibility: hidden;left: 0px;top: 20px;}
div#ss ul {border: 1px solid #000000;text-align: left;}
div#ss li {
position: relative;
width: 100%;
background-color: #FFFFFF;
cursor: default;
line-height: 18px;
text-indent: 2px;
}
div#ss li.b {background-color: #6666FF;color: #FFFFFF;}
div#ss li.hov span {color: #99FFFF;}
div#ss li span {color: #009900;position: absolute;top: 0px;right: 2px;}
UL {list-style-type: none;}
-->
</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";
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
