如何做到让下拉列表框获得焦点后就自动下拉分数不是问题

如何做到让下拉列表框获得焦点后就自动下拉 希望能象SOHU登陆那样 或者查询一样 输入字符以后会自动的在下拉菜单显示相关的数据库信息 我找了一些关于这个方面的列子 无奈水平有限 无法实现 有些看不懂 那我先把我原来看到的代码贴出来让大家看 有一个已经已经实现了 不过没有连接数据库 我不懂AJAX 所以看谁能帮个忙吧.谢谢了<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>20060427simulate 163</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
}body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        line-height: 150%;
        color: #003399;
        text-decoration: none;
}
a:link {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        line-height: 150%;
        font-weight: normal;
        color: #003399;
        text-decoration: none;
}
a:visited {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        line-height: 150%;
        font-weight: normal;
        color: #003399;
        text-decoration: none;
}
a:hover {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        line-height: 150%;
        color: #0099FF;
        text-decoration: underline;
}
a:active {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        line-height: 150%;
        color: #0099FF;
        text-decoration: underline;
}-->
</style></head>
<script language="javascript">
/*
author：moonboy
本例中采用onKeyUp事件方可将录入的数据取到。在使用onKeyDown,onKeyPress事件时只是在录入第二个数据时才能取到第一个数据（i don't konw why）。
*/
//var ns = String.fromCharCode(event.keyCode);function droplist(){
var np= event.keyCode;
if(np==38||np==40){}
var textv = document.getElementById("drop").value; //取得文本框内的值
        textv=textv.toLowerCase(); //全部转成小写
var user = new Array();//初始化数组用来存储页面列表值的集合
var sortUser = new Array();//排序后的数组
var resultuser = new Array();//输出到前台的数组
var vv = document.getElementsByName("hv");//页面的值
var vvl= vv.length;//页面值的数组长度
//付值将从页面取到的集合放入user数组
for(var i=0;i<vvl;i++){
        user[i]=vv[i].value;
}sortUser = user.sort();//对数组排序var rs =new Array();//初始化符合查询条件的数组
var temp;
var c=0;//符合条件的数组计数for(var j=0;j<vvl;j++){
  temp=queryWord(textv,sortUser[j]);//调用queryWord函数，计算出符合条件的值
        if(temp==""){
        continue;
        }else{
        //temp=getSelect(textv,temp);
        rs[c]="<tr id='tv' name='tv' bgcolor='#eeeeee'><td id='al"+c+"'  onclick='onV("+c+")' style='cursor:pointer'  onmouseover='alterBg("+c+",0)' onmouseout='alterBg("+c+",1)'>"+getSelect(textv,temp)+"</td></tr>";
        c++;
        }
}
resultuser=rs.join("");//将书组数据分隔符设为换行符
if(textv.length==0){
resultuser="";
}document.getElementById("p").innerHTML="<table width='150px' cellpadding='0' bgcolor='#FFFFFF' cellspacing='0'>"+resultuser+"</table>";//将数据打印到指定区域
}function getSelect(obj,objtext){
var ol= obj.length;
var res;
obj=objtext.substring(0,ol);
res="<b>"+obj+"</b>"+objtext.substring(ol,objtext.length);
return res;
}function alterBg(j,i){//改变下拉列表鼠标事件颜色
var o = document.getElementById('al'+j);
if(i==0)
o.style.backgroundColor ="#FFFFEE";
else if(i==1)
o.style.backgroundColor ="#eeeeee";
}function onV(j){//取得下拉列表点击值
var o = document.getElementById('al'+j).innerHTML;
o=o.replace("<B>","");
o=o.replace("</B>","");
document.getElementById('drop').value=o;
}function queryWord(para,str){//该函数为根据条件查询的结果
var r;
r=str.search(para);
if(r==0){
return str;
}else{
return "";
}}function Search(textv,str){//测试用函数在本例中不使用
        //var textv = document.getElementById("drop").value;
        
   var r,result;                   // 声明变量。
   r = str.search(textv);            // 查找字符串。
        str=str.slice(r,-1);
   document.getElementById("p").innerHTML=str.substring(0,str.indexOf(" "));
        result=str.substring(0,str.indexOf(""));
return result;
                  // 返回 Boolean 结果。
}var i=0;
var k;
function changeTable(){
var selectLength;
selectLength=document.getElementsByName("tv").length;
document.getElementById("opp").innerHTML=selectLength;var keyvalue=event.keyCode;
if(selectLength>0){        if(keyvalue==40){
        k=i;
        i++;
        }
        else if(keyvalue==38){
        k=i;
        i--
        };
                if(i<0){
                i=selectLength-1;
                }else if(i>selectLength-1){
                i=0;
                }var m = "al"+i;
var n ="al"+k;
if(selectLength==1){
var p = document.getElementById(m);
        p.style.backgroundColor="#ffffee";
}else{
        if(i>=0 && i<selectLength){
        var p = document.getElementById(m);
        p.style.backgroundColor="#ffffee";
        }        if(k>=0 && k<selectLength){
        var h = document.getElementById(n);
        h.style.backgroundColor="#eeeeee";
        }
if(keyvalue==13){
onV(i);
}
}
}
}function loadDiv(){
div1.style.visibility="show";
div2.style.visibility="show";
}
function showBody(){
var div1 = document.getElementById('Layer1');
var div2 = document.getElementById('Layer2');
div1.style.visibility="hidden";
div2.style.visibility="hidden";}
</script><body> 
<div id="opp"></div>
  <div id="Layer1" style="position:absolute; background-color:#000000; left:0px; top:0px; width:100%; height:650px; filter: alpha(opacity=20); z-index:1; visibility: hidden;"></div>
  <div id="Layer2" style="position:absolute; left:0px; top:150px; width:100%; height:200px; z-index:2; visibility: hidden;">
  <table align="center" width="50%" height="70" cellpadding="0" bgcolor="#FFFFFF" cellspacing="0" > 
    <tr> 
      <td  align="center"><a href="javascript:void(0)" onclick="showBody()">点击这里for my dear Gee_gee</a>(Moontoucher's UI manager)</td> 
    </tr> 
</table> </div><br>
<br>
<br>
<br>
<br><input name="drop" type="text" id="drop" onKeyup="droplist();changeTable()" > 
仿163输入邮件地址自动显示下拉列表（献给最亲爱的gee_gee）
<div id="p" style="height:100px; width:170px; overflow:auto; border-width:1px; border-color:#000000 "></div> 
<input type="hidden" id="hv" name="hv" value="123"> 
<input type="hidden" id="hv" name="hv" value="uio"> 
<input type="hidden" id="hv" name="hv" value="lkjl"> 
<input type="hidden" id="hv" name="hv" value="9876"> 
<input type="hidden" id="hv" name="hv" value="123467"> 
<input type="hidden" id="hv" name="hv" value="fghj"> 
<input type="hidden" id="hv" name="hv" value="yutf78"> 
<input type="hidden" id="hv" name="hv" value="王旺"> 
<input type="hidden" id="hv" name="hv" value="cuiliyi"> 
<input type="hidden" id="hv" name="hv" value="呵呵"> 
<input type="hidden" id="hv" name="hv" value="王子复仇记"> 
<input type="hidden" id="hv" name="hv" value="certerly"> 
<input type="hidden" id="hv" name="hv" value="123"> 
<input type="hidden" id="hv" name="hv" value="uio"> </body>
</html>

解决方案 »

  1.   

    在textbox中输入内容，动态从数据库模糊查询显示到下拉框中
      

  2.   

    http://topic.csdn.net/u/20080105/12/0e3200e9-f553-4801-ab11-848117ccb6c3.html 这个是我之前写的。 
    你看看是否有帮助。 
    除了自己模拟没有别的方法。
    你改一下就可以用了。
      

  3.   

    如果不懂ajax的话，那你还是先学一下去吧，否则很难说清楚的。这个完全是文本框加一个隐藏的浮动层来实现的。浮动层的内容随着用户的输入动态从数据库中获取相关的内容。就像google一样，你输入北，它会自己出来北京
      

  4.   

    没错 没错我知道是这个原理 我上面的发的列子已经实现了这个效果 我只是不了解怎么用ajax 来进行及时的读取数据  
      

  5.   

    下载Ajax 元件,有个AutoCoplete物件,直接设置一下属性,就实现了
      

  6.   

    TNT_1st_excellence 
    一等一 
    等 级：
     发表于：2008-01-17 09:55:017楼 得分:0 
    下载Ajax   元件,有个AutoCoplete物件,直接设置一下属性,就实现了 
     具体去那里下载呢???