类似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").onkeyup=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' onmouseover='SetHighColor(this)' onclick='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"/>