点击添加到搜索框也没有讲
点击下面的数据添加到搜索框
白砂糖K
2017-05-10
2 回答
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>ajax</title>
<style type="text/css">
.mouseOver{
background: #708090;
color: #FFFAFA;
}
.mouseOut{
background: #FFFAFA;
color: #000000;
}
</style>
<body>
<div>
<div style="position:relative">
<input type="text" size="50" id="keyword" onkeyup="getMoreContents()" onblur="keywordBlur()" onfocus="getMoreContents()">
<input type="button" value="百度">
</div>
<div id="popDiv" style="position:absolute">
<table id="content_table" bgcolor="#FFFAFA">
<tbody id="content_table_body">
</tbody>
</table>
</div>
<div>aaaa</div>
</div>
</body>
<script type="text/javascript">
var xmlHttp;
function getMoreContents(){
var content=document.getElementById("keyword");
if(content.value==""){
clearContent();
return;
}
xmlHttp=createXMLHttp();
var url="search?keyword="+escape(content.value);
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);
}
//创建xmlHttp对象
function createXMLHttp(){
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
if(!xmlHttp){
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
}
return xmlHttp;
}
//回调函数
function callback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
var result=xmlHttp.responseText;
var json=eval("("+result+")");
setContent(json);
}
}
}
//设置关联数据的展示
function setContent(contents){
clearContent();
setLocation();
var size=contents.length;
for(var i=0;i<size;i++){
var nextNode=contents[i];
var tr=document.createElement("tr");
var td=document.createElement("td");
td.setAttribute("border", "0");
td.setAttribute("bgcolor", "#FFFAFA");
td.setAttribute("id",i);
td.onmouseover=function(){
this.className='mouseOver';
};
td.onmouseout=function(){
this.className='mouseOut';
};
td.onclick=function(){//点击获取td的值
document.getElementById("keyword").value=this.innerHTML;
clearContent();
};
var text=document.createTextNode(nextNode);
td.appendChild(text);
tr.appendChild(td);
document.getElementById("content_table_body").appendChild(tr);
}
}
//清空之前的数据
function clearContent(){
var contTableBody=document.getElementById("content_table_body");
var size=contTableBody.childNodes.length;
for(var i=size-1;i>=0;i--){
contTableBody.removeChild(contTableBody.childNodes[i]);
}
document.getElementById("popDiv").style.border="none";
}
//失去焦点时
function keywordBlur(){
setTimeout("clearContent()",1000);//停一秒再清空，不然选择无效
}
//设置数据展示样式
function setLocation(){
var content=document.getElementById("keyword");
var width=content.offsetWidth;
var left=content["offsetLeft"];
var top=content["offsetTop"]+content.offsetHeight;
var popDiv=document.getElementById("popDiv");
popDiv.style.border="black 1px solid";
//popDive.style.left=left+"px";
//popDiv.style.top=top+"px";
popDiv.style.width=width+"px";
document.getElementById("content_table").style.width=width+"px";
}
</script>
</html>举报
0/150
提交
取消
