                        課程
                    
                        /后端開發
                        
                            /Java
                        
                        /Servlet+Ajax實現搜索框智能提示

點擊添加到搜索框也沒有講

點擊下面的數據添加到搜索框

白砂糖K

2017-05-10

源自：Servlet+Ajax實現搜索框智能提示 3-1

關注問題我要回答

935

操作

收起

2 回答

qq_勇往矗湔_0
2018-01-24

niu

0 回復有任何疑惑可以回復我~

收起回答

白砂糖K 提問者
2017-05-10

<%@?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>