                        課程
                    
                        /后端開發(fā)
                        
                            /Java
                        
                        /Servlet+Ajax實現(xiàn)搜索框智能提示

老師求源碼

老師源碼分享一下可以嗎

tabb

2016-10-25

源自：Servlet+Ajax實現(xiàn)搜索框智能提示 2-8

關注問題我要回答

859

操作

收起

3 回答

tabb 提問者
2016-10-26

最下面第6行，應該是Json嗎

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

收起回答

tabb 提問者
2016-10-26

謝謝。

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

收起回答

小草1434
2016-10-25

<%@?page?language="java"?pageEncoding="UTF-8"%>
<!DOCTYPE?html>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8">
<title>ajax?百度搜索</title>
<style?type="text/css">
#searchDiv{position:absolute;top:50%;left:50%;margin-left:-200px;margin-top:-50px;height:50px;}
#popDiv{width:400px;position:absolute;top:50%;left:50%;height:200px;margin-left:-120px;}
#popDiv?.show{color:#000;width:400px;height:20px;}
#popDiv?.show:HOVER{background-color:#eee;}
</style>
</head>
<body>
	<div?id="searchDiv">
		<input?type="text"?name="s"?id="keyWord"?onkeyup="getMore();"?onfocus="getMore();"?onblur="keyBlur();">
		<input?type="button"?value="百度一下">
		
		<div?id="popDiv">
		
		</div>
	</div>
	<script?type="text/javascript">
	var?xmlHttp;
	function?createXMLHttp(){
		if(window.XMLHttpRequest){
			xmlHttp?=?new?XMLHttpRequest();
		}
		if(window.ActiveXObject){
			xmlHttp?=?new?ActiveXObject("Microsoft.XMLHTTP");
			if(!xmlHttp){
				xmlHttp?=?new?ActiveXObject("Msxml2.XMLHTTP");
			}
		}
		return?xmlHttp;
	}
	
	function?getMore(){
		var?content?=?document.getElementById("keyWord");
		if(content.value==""){
			document.getElementById("popDiv").innerHTML="";
			return?;
		}
		xmlHttp?=?createXMLHttp();
		var?url="http://localhost:8080/clb/getMore?keyword="+escape(content.value);
		//true:表示javaScript腳本在send()方法之后繼續(xù)執(zhí)行，不會等待來自服務器的響應
		xmlHttp.open("GET",url,true);
		//xmlHttp綁定回調方法，這個回調方法在xmlHttp狀態(tài)改變的時候被調用
		//xmlHttp的狀態(tài)0-4，我們只關心4(complete)這個狀態(tài)，
		//當數(shù)據(jù)傳輸?shù)倪^程完成之后，在調用回調方法才有意義
		xmlHttp.onreadystatechange=callback;
		xmlHttp.send(null);
	}
	var?temp;
	//回調函數(shù)
	function?callback(){
		if(xmlHttp.readyState==4){
			if(xmlHttp.status==200){
				//alert(xmlHttp.readyState+"??"+xmlHttp.status);
				var?result?=?xmlHttp.responseText;
				temp?=?result;
				//解析獲得的數(shù)據(jù)
				var?json?=?eval("("+result+")");
				//獲取數(shù)據(jù)之后進行動態(tài)顯示到輸入框的下面。
				setContent(json);
			}
		}
	}
	//設置關聯(lián)數(shù)據(jù)的展示
	function?setContent(contents){
		var?size?=?contents.length;
		document.getElementById("popDiv").innerHTML="";
		for(var?i?=?0;i<size;i++){
			var?nextNode?=?contents[i];//代表的是json格式數(shù)據(jù)的第i個元素
			var?div=document.createElement("div");
			div.setAttribute("class","show");
			div.onclick=function(){
				//實現(xiàn)鼠標點擊一個關聯(lián)的數(shù)據(jù)時關聯(lián)數(shù)據(jù)自動設置為輸入框
			};
			var?text?=?document.createTextNode(nextNode);
			div.appendChild(text);
			document.getElementById("popDiv").appendChild(div);
		}
	}
	
	function?keyBlur(){
		document.getElementById("popDiv").innerHTML="";
	}
	</script>
</body>
</html>

@ResponseBody
	@RequestMapping(value?=?"getMore",?method?=?RequestMethod.GET,
	//解決第三方亂碼問題
	produces={"application/json;charset=UTF-8"})
	public?String?getMore(@RequestParam(value="keyword")?String?keyword)?{
		Gson?gson?=?new?Gson();
		return?gson.toJson(getList(keyword));
	}
	
	private?List<String>?getList(String?keyword){
		List<String>?list?=?new?ArrayList<String>();
		list.add("ajax");
		list.add("a");
		list.add("b");
		list.add("c");
		list.add("ab");
		list.add("ajax?up");
		list.add("d");
		list.add("ajcx");
		List<String>?list1?=?new?ArrayList<String>();
		for(String?s:list){
			if(s.contains(keyword)){
				list1.add(s);
			}
		}
		return?list1;
	}

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

收起回答