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