类似GOOGLE实现下拉框列表提示

FireFox与IE的小小注意：

1、firefox记得宽度和高度加‘p ’

2、firefox事件用obj.addEventListener("input",test1,false);

3、事件源与event对象。

     event.srcElement和event.target

     event和window.event

类似GOOGLE实现下拉框列表提示代码：

 

<!-- style显示控制医院列表 -->
 <style>
  span
  {
   text-align:left;
   font-size:12px;
   width: 200px;
  }
  span.spanTextDropdown{
   position: absolute;  
   top: 0px;  
   left: 0px;  
   width: 200px;  
   z-index: 101;  
   background-color: #ffffff;  
   border: 1px solid #000000;  
   padding-left: 2px;  
   overflow: visible;  
   display: none;  
  }  
   
  span.spanMatchText{
   text-decoration: underline;  
   font-weight: bold;
  }  
  span.spanNormalElement{ background: #ffffff; }  
  span.spanHighElement{
   background: #FF99CC;  
   color: #0000FF;  
   cursor: pointer;
  } 
 </style>
 <!-- style显示控制结束 -->

 

 

//DOWNLIST.JS

var arrOptions = new Array();  
var theTextBox;  
var isSure=0;
//表当前选中的某项  
var currentValueSelected = -1;
//以上设置一些全局变量  
window.onload = function()
{  
 
 //在页面创建span标签  
 var elemSpan = document.createElement("span");
 elemSpan.id = "spanOutput";  
 elemSpan.className = "spanTextDropdown";  
 document.body.appendChild(elemSpan);  
 //当按键抬起调用此函数 
 if(isIE())
 {
  $("hospital").οnkeyup=test1;
  $("hospital").onpropertychange=test1;
 }
 else
 {
  $("hospital").addEventListener("input",test1,false);
  $("hospital").addEventListener("keyup",test1,false);
 }
}  
  
function show(){alert("evet");}
  
function isIE()
{
 if(navigator.appName.indexOf("Explorer")>-1) return true;
 else return false;
}
  
function $(id){ return document.getElementById(id);}
  
function clearOptions(ctl)
{
 for(var i=ctl.options.length-1;i>0;i--){ctl.remove(i);}
}
 
function getKesi(hos)
{
 linkage.getSS(hos,function(returnvalue)
 {
  for(var i=0; i<returnvalue[0].length; i++)
  {
   document.getElementById("office").options.add(new Option(returnvalue[1][i],returnvalue[0][i]));
  }
 });
}
      
function test1(evt)
{  
 var intKey = -1;  
 var temp="";
 var evt=evt?evt:(window.event?window.event:null);
 if(evt)
 {  
  intKey = evt.keyCode;
  //获得事件源 
  theTextBox = evt.srcElement?evt.srcElement:evt.target;
 }
 clearOptions(document.getElementById("office"))
 if(isSure==1){isSure=-1;return false;}
 else
 {
  if(isSure<0) isSure=0;
  else
  {
   if(theTextBox.value.length == 0)
   {  
    HideTheBox();  
    return false;  
   }  
   if(intKey == 13){
    //按回车键           
    SetText();  
    theTextBox.blur();
    return false;  
   }else if(intKey == 38){
    //按向上键     
    MoveHighlight(-1);  
    return false;  
   }else if(intKey == 40){
    //按向下键    
    MoveHighlight(1);  
    return false;  
   }  
   var vau=$("hospital").value;
   if(vau=="输入医院进行选择" || vau==null) vau="";
   //dwr技术，后台连接数据库 
   linkage.getHosByHNameAndArea(
    vau,
    $("aname").value,  
    function(datas)
    {  
     arrOptions=datas;  
     //建立下拉框  
     Bulid(arrOptions);
    }  
   );
  }
 }
}  

function Bulid(arrOptions)
{  
 var inner="";  
 //设置下拉框出现的位置
 SetElementPosition();
 var i=0;
 for(var i=0;i<arrOptions.length;i++)
 {
     inner+="<span id=arr_"+i+" class='spanNormalElement' οnmοuseοver='SetHighColor(this)' οnclick='SetText()'><font color='#0000FF'>"+arrOptions[i].HName+"</font></span><br>";
    }   
 document.getElementById("spanOutput").innerHTML = inner;  
 if(inner!="")
 {  
  //设置第一个顶为默认选中  
  document.getElementById("arr_0").className ="spanHighElement";
  currentValueSelected=0;  
 }
 else
 {
  HideTheBox();
  currentValueSelected=-1;
 }  
}   
  

function SetElementPosition()
{
 //设置下拉框出现的位置  
 var selectedPosX = 0;  
 var selectedPosY = 0;  
 var theElement = $("hospital");  
 var theTextBoxInt = $("hospital");  
   
 if (!theElement) return;  
 var theElemHeight = theElement.offsetHeight;  
 var theElemWidth = theElement.offsetWidth;  
 while(theElement != null)
 {  
  selectedPosX += theElement.offsetLeft;  
  selectedPosY += theElement.offsetTop;  
  theElement = theElement.offsetParent;  
 }
 xPosElement = document.getElementById("spanOutput");  
 if(isIE())
 {
  xPosElement.style.left = selectedPosX;  
  xPosElement.style.width = theElemWidth;  
  xPosElement.style.top = selectedPosY + theElemHeight  
  xPosElement.style.display = "block";  
 }
 else
 {
  xPosElement.style.left = selectedPosX+'px';  
  xPosElement.style.width = theElemWidth+'px';  
  xPosElement.style.top = selectedPosY + theElemHeight+'px';  
  xPosElement.style.display = "block"; 
 }
}  
   
function MoveHighlight(xDir)
{
 //设置上下移动键  
 var currnum=currentValueSelected+xDir;  
 if(currnum >= 0 && currnum<arrOptions.length )
 {  
  document.getElementById("arr_"+currentValueSelected+"").className ="spanNormalElement";  
  document.getElementById("arr_"+currnum+"").className ="spanHighElement";  
  currentValueSelected=currnum;  
 }
 else if(currnum==arrOptions.length)
 {  
  document.getElementById("arr_"+currentValueSelected+"").className ="spanNormalElement";  
  currentValueSelected=0;  
  document.getElementById("arr_"+currentValueSelected+"").className ="spanHighElement";  
 }
 else if(currnum==-1)
 {  
  document.getElementById("arr_"+currentValueSelected+"").className ="spanNormalElement";  
  currentValueSelected=arrOptions.length-1;  
  document.getElementById("arr_"+currentValueSelected+"").className ="spanHighElement";  
 }  
}  
function HideTheBox()
{
 //隐藏下拉框  
 document.getElementById("spanOutput").style.display = "none";  
 currentValueSelected = -1;  
}  
function SetText()
{
 //选中下拉框中的某个值 
 isSure=1;
 theTextBox = $("hospital");  
 theTextBox.value = arrOptions[currentValueSelected].HName;  
 document.getElementById("spanOutput").style.display = "none";  
 $("hospital").value=theTextBox.value; 
 $("hos").value=theTextBox.value;
 getKesi(theTextBox.value);
 currentValueSelected = -1;   
}  
        
function SetHighColor(theTextBox)
{
 //当鼠标划过变为选中状态  
 if(theTextBox)
 {  
  currentValueSelected = theTextBox.id.slice(theTextBox.id.indexOf("_")+1,theTextBox.id.length);
 }  
 for(var i = 0; i < arrOptions.length; i++)
 {  
  document.getElementById('arr_' + i).className ='spanNormalElement';  
 }  
 document.getElementById('arr_'+currentValueSelected).className = 'spanHighElement';  
}

 

function FocuText()
{
    $("hospital").select();
    var vau=$("hospital").value;
    if(vau=="输入医院进行选择" || vau==null) vau="";
    
    //dwr技术，后台连接数据库  
    linkage.getHosByHNameAndArea(
     vau,
     $("aname").value,  
     function(datas){  
      arrOptions=datas;  
      //建立下拉框  
      Bulid(arrOptions);
     }  
    ); 
}
   
function BlurText()
{
    if($("hospital").value=="") $("hospital").value="输入医院进行选择";
}

 

 

<script type='text/javascript' src='dwr/interface/linkage.js'></script>
  <script type='text/javascript' src='dwr/engine.js'></script>
  <script type='text/javascript' src='dwr/util.js'></script>
  <script type='text/javascript' src='js/downlist.js'></script>

 

<input type="text" name="hospital" id="hospital" value="输入医院进行选择" onFocus="FocuText();" onBlur="BlurText();" size="30" maxlength="100"/>