<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>divshow</title>
<style type="text/css">
body{text-align:center;}
#divResult{display:none;background-color:white;z-index:1000;position:absolute;border:1px solid lightgray;cursor:pointer;}
ul{width:100%;margin:0px;}
ul li{list-style:none; width:100%;padding:auto 0px;margin:0px;text-align:left;}
</style>
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript">
//初始化div的位置
$(function(){
var oInput = $("#txtKeyword");
var pointX = oInput.offset().left;
var pointY = oInput.offset().top;
var width = oInput.width();
var height = oInput.height();
$("#divResult").css({"top":pointY+height+4+"px","left":pointX+"px","width":width+6+"px"});
})
var data = ["张三", "李四", "CSDN", "CCTV", "张五"];
function Search(){
$("#divResult").css({"display":"none"});
$("#divResult").html("");//清空div
var val = $("#txtKeyword").val();
if(val == "") {
return;
}
//添加数据
var strUl = "<ul>";
for(var i=0; i < data.length; i++){
if(data[i].indexOf(val) >= 0){
strUl += "<li οnmοuseοver='mover(this)' οnmοuseοut='mout(this)' οnclick='mclick(this)'>" + data[i] + "</li>";
}
}
/*jQuery.ajax({
url: 'xml/meetingTitle_ajax_xml.jsp?keyword='+keyword,
type: 'post',
dataType: 'text',
contentType: 'application/json; charset=GBK',
success: function (data) {
var strs = new Array(); //定义一数组
strs = data.split(","); //字符分割----得到数据
for(var i=0; i < strs.length; i++){
strUl += "<li οnmοuseοver='mover(this)' οnmοuseοut='mout(this)' οnclick='mclick(this)'>" + strs[i] + "</li>";
}
}
});*/
strUl += "</ul>";
if(strUl != "<ul></ul>"){
$("#divResult").html(strUl);
$("#divResult").css({"display":"block"});
}
}
//改变背景色、点击事件
function mover(obj){
$(obj).css({"background-color":"lightgray"});
}
function mout(obj){
$(obj).css({"background-color":"white"});
}
function mclick(obj){
$("#txtKeyword").val($(obj).html());
$("#divResult").css({"display":"none"});
}
</script>
</head>
<body>
<br><br><br><br><br><br><br>
<div>百度一下 你就知道<div>
<br>
<div>
<input type="text" id="txtKeyword" name="txtKeyword" οnkeyup="Search()" style="width:250px;"/><br>
<div id="divResult"></div>
</div>
</body>
</html>
--要引用jquery