javascript实现的google提示中的上下方向键效果

<style>
<!--
#ccc{
    height:90px;
 background-color:#0099FF;
 width:158px;
}
#ccc ul{
 list-style-type:none;
 margin:0px;
 padding-left:0px;
 font-size:12px;
}
.c1{
 width:100%;
 height:20px;
 line-height:20px; 
 font-size:12px;
 color:#FFFFFF;
 background-color:#0099FF;
 padding-left:5px;
 
}
.c2{
    width:100%;
 height:20px; 
    line-height:20px;
 font-size:12px;
 color:#000000;
 font-weight:bold;
 background-color:#FFFF00;
 padding-left:5px; 
}
-->
</style>
<!--
功能：类似google提示那种上下方向键来
改变所选行的颜色和选择所选的内容
作者：wangsdong
开发：www.aspprogram.cn
原创文章，支持原创，保留此信息
-->
<div id="aaaa">
<input type="text" name="a1" id="a1" size="21"/>
</div>
<div id="ccc">
  <ul>
     <li class="c1">1111</li>
  <li class="c1">2222</li>
  <li class="c1">3333</li>
  <li class="c1">4444</li>
  <li class="c1">5555</li>
  <li class="c1">6666</li>
  </ul>
</div>
<script language="javascript">
s1=0;
function doSomething (obj,evt) { 
 window.open(obj);
 var e=(evt)?evt:window.event; 
 if (window.event) { 
 e.cancelBubble=true; 
 } else { 
 e.stopPropagation(); 
 } 
} 
</script>
<script language="javascript" for="document" event="onkeydown">
document.getElementById("ccc").focus();
p=document.getElementById("ccc").firstChild;
n=p.childNodes.length;
if(event.keyCode==38)
{
   s1--; 
   if(s1>=1)
   {     
      document.getElementById("a1").value=p.childNodes[s1-1].innerHTML;  
 }
   else 
   {
     s1=0;
  document.getElementById("a1").value="";
 }
  
}
else
if (event.keyCode==40)
{
   s1++;
   if(s1<=n)
   {   
      document.getElementById("a1").value=p.childNodes[s1-1].innerHTML;
   }  
   else
   {   
     document.getElementById("a1").value="";
  s1=n+1; 
   }
}

for(i=1;i<=n;i++)
{
    if(s1==i)
 {
     p.childNodes[i-1].className="c2";
 }
 else
 {
     p.childNodes[i-1].className="c1"; 
 }
}

function $(id)
{
   return document.getElementById(id);
}
</script>

源码下载地址：http://www.aspprogram.cn/html/soft/200943205100.html