一个类google搜索框输入提示功能的示例代码，采用层定位，居中对齐，input 的输入改变、失去焦点、获得焦点事件......解决了onblur和onclick同时被调用的失效问题。
div居中、层定位、类google输入提示示例,在线qq查询，自动刷新_css
testGoogle.htm
<html>
<head>
<style type="text/css">
body{text-align:center;}
.ttStyle{border:dotted 1px green; width:180px;}
.top{margin:0 auto;width:760px;text-align:left;}
.mStyle{border:solid 1px #f2cccc;width:760px;height:400px;POSITION:absolute;text-align:left;}
.layStyle{border:solid 1px #cccccc;width:180px;height:200px;background-color:#eeeeee;POSITION:absolute;left:48px;top:22px;display:none;}
.sitem{width:100%;}
</style>
<script language="javascript">
var k=0;
function change(obj)
{
 var str=loadData(obj);
 document.getElementById("slayout").innerHTML="<div id='vv' class='sitem' Is</div>"+str;
}
function loadData(obj)
{
 // Ajax to load datas from server ...
 return "<div id='vv' class='sitem' onclick='sltValue(this)'>"+obj.value+"</div><div id='vv' class='sitem' onclick='sltValue(this)'>"+(k++)+"</div>";
}
function sopen(obj)
{
 document.getElementById("slayout").style.display="block";
}
function sclose(obj)
{
 if(document.activeElement.id=="vv") return false; // avoid onblur and onclick error
 document.getElementById("slayout").style.display="none";
}
function showbg(obj)
{
 obj.style.backgroundColor="green";
}
function hiddenbg(obj)
{
 obj.style.backgroundColor="#ffffff";
}
function sltValue(obj)
{
 document.getElementById("tt").value=obj.innerHTML;
 document.getElementById("slayout").style.display="none";
}
</script>
</head>
<body>
<br>
<div id="top" class="top">
<div id="main" class="mStyle">
Test:
<input id="tt" type="text" class="ttStyle" onfocus="sopen(this)" oninput="change(this)" onpropertychange="change(this)" onblur="sclose(this)">
<br>
<div id="slayout" class="layStyle"></div>
</div>
</div>
</body></html>
 
qq在线查询代码,隔15秒自动刷新一次：
qq.htm:
<html>
<meta http-equiv="refresh" content="15">
<head>
</head>
<body>
</body>
</html>