问答详情
源自:3-1 Ajax课程总结

点击添加到搜索框也没有讲

点击下面的数据添加到搜索框

提问者:白砂糖K 2017-05-10 15:09

个回答

  • qq_勇往矗湔_0
    2018-01-24 22:47:18

    niu

  • 白砂糖K
    2017-05-10 23:38:32

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