接上一篇。
这次完成效果是，选中联想选项，选项变色；点击选项时文本框填充选项，etc……
代码是在search.jsp页面改动。searchservlet没有改动。
javascript代码
<script type="text/javascript">
//创建对象
var xmlHttpRequest;
function createXML(){
if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
return new XMLHttpRequest();
}
}
//发送请求
function send2(){
xmlHttpRequest=createXML();
var name= document.getElementById("name").value;
var url="SearchServlet?name="+name+"&id="+Math.random();
xmlHttpRequest.onreadystatechange = haoLeJiaoWo;
xmlHttpRequest.open("post",url,true);
xmlHttpRequest.send(null);
}
//回调函数
function haoLeJiaoWo(){
if(xmlHttpRequest.readyState == 4&&xmlHttpRequest.status == 200 ){
var str=xmlHttpRequest.responseText;
var div1=document.getElementById("Layer1");
div1.style.display="block";
if(str==""||str==null){
div1.style.display="none";
}
var arr=str.split("-");
var divStr="";
for(var i=0;i<arr.length;i++){
divStr+="<div class='outcss' onclick='txt(this)' onmouseover='over(this)' onmouseout='out(this)'>"+arr[i]+"</div>";
}
div1.innerHTML=divStr;
}
}
function txt(obj){
document.getElementById("name").value=obj.innerHTML;
document.getElementById("Layer1").style.display="none";
}
function over(obj){
obj.className="overcss";
}
function out(obj){
obj.className="outcss";
}
</script>
body代码：
<body> <div id="Layer1" style="display:none"></div> <form id="form1" name="from" method="get" action="SearchServlet"> <label> <input type="text" id="name" name="name" onkeyup="send2()"/> <input type="submit" name="Submit" value="百度一下" /> </label> </form> </body>
css样式：
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:10px;
top:38px;
width:166px;
border: 1px solid #000000;
z-index:1;
}
.outcss{
background-color: white;
padding: 1px 2px 1px 8px;
}
.overcss{
background-color: gray;
padding: 1px 2px 1px 8px;
}
-->
</style>