点击添加到搜索框也没有讲-慕课网

首页课程实战体系课手记专栏慕课教程

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

来源：3-1 Ajax课程总结

白砂糖K

2017-05-10 15:09

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

写回答关注

2回答

qq_勇往矗湔_0

2018-01-24 22:47:18

niu

0 0

白砂糖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>

0 3

Servlet+Ajax实现搜索框智能提示

Java实现搜索框智能提示，熟练掌握使用Servlet和Ajax

37805 学习 · 146 问题

查看课程

相似问题

搜索框列表

回答 1

关于ajax实现搜索框下拉提示

回答 2

如何同时实现失去焦点清空，单击单元格文本框赋值（Servlet+Ajax实现搜索框智能提示...）

回答 1

在没有数据的时候，鼠标点击输入框，输入框下还是有样式

回答 2

中文搜索问题

回答 1

打开慕课网App查看更多内容