servlet+ajax搜索框提示

最新推荐文章于 2021-08-05 12:50:32 发布

AQ_xiaobin

最新推荐文章于 2021-08-05 12:50:32 发布

阅读量624

点赞数

分类专栏： JAVA

本文链接：https://blog.csdn.net/AQ_xiaobin/article/details/53132213

版权

JAVA 专栏收录该内容

57 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>智能搜索框提示</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/myindex.js"></script>
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/css/myindex.css">
</head>
<body>

  <div id="mydiv"> 
    <input type="text" size="50" id="keyword" οnkeyup="getMoreContents()" οnblur="keywordBlur()" οnfοcus="getMoreContents()"/>
    <input type="button" value="百度一下" width="50px"/>
    
    <!-- 内容展示区 -->
    <div id="popDiv">
        <table id="content_table" bgcolor="#ffafa" border="0" cellpadding="0" cellspacing="0">
          <tbody id="content_table_body">
            
          </tbody>
        </table>
    </div>
    
  </div>

</body>
</html>

/**
 * 获得用户输入内容的关联信息	
 */
var xmlhttp;

function getMoreContents(){
	//获得用户输入的value
	var content=document.getElementById("keyword").value;
	if(content==""){
		clearContent();
		return;
	}
	
	//给服务器发送用户输入的内容。ajax异步加载
	//使用xmlhttp对象
	 xmlhttp=createXMLHttp();
	//给服务器发送数据
	 var url="search?keyword="+escape(content);
	 //true表示异步发送
	 xmlhttp.open("GET",url,true);
	 //xmlhttp响应
	 xmlhttp.onreadystatechange=callback;
	 
	 xmlhttp.send(null);
}

//获取XMLHttp对象方法
function createXMLHttp(){
	
	if(window.XMLHttpRequest){
		//浏览器的兼容
		xmlhttp=new XMLHttpRequest();
	}else{
		//IE6以下的
		xmlHttp=new ActiveXObject("Microsoft.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();
	//获得内容的长度，确定生成tr
	var size=contents.length;
	
	for ( var i = 0; i < size; i++) {
		var nextNode=contents[i];//代表json格式的第i个元素
		var tr=document.createElement("tr");//创建一个<tr>
		var td=document.createElement("td");
		
		td.setAttribute("border", 0);
		td.setAttribute("bgcolor", "#fffafa");
		//鼠标样式
		td.οnmοuseοver=function(){
			this.className='mouseOver';
		}
		td.οnmοuseοut=function(){
			this.className='mouseOut';
		}
		
		td.οnclick=function(){
			//鼠标点击关联数据，自动设置为输入框的数据
			
		}
		
		var text=document.createTextNode(nextNode);
		td.appendChild(text);
		tr.appendChild(td);
		document.getElementById("content_table_body").appendChild(tr);
	}
}

//清空之前的数据
function clearContent(){
	var contentTableBody=document.getElementById("content_table_body");
	var size=contentTableBody.childNodes.length;
	
	for(var i=size-1;i>=0;i--){
		contentTableBody.removeChild(contentTableBody.childNodes[i]);
	}
	
	document.getElementById("popDiv").style.border="none";
	
}

//输入框失去焦点的时候清空
function keywordBlur(){
	clearContent();
}


function setLocation(){
	//显示位置与输入框一致
	var content=document.getElementById("keyword");
	var width=content.offsetWidth;//输入框宽度"500px";
	var left=content["offsetLeft"];//左边框距离
	var top=content["offsetTop"]+content.offsetHeight;//顶部
	//显示数据的DIV
	var popDiv=document.getElementById("popDiv");
	popDiv.style.border="black 1px soild";
	popDiv.style.left=left+"px";
	popDiv.style.top=top+"px";
	popDiv.style.width=width+"px";
	
	document.getElementById("content_table").style.width=width+"px";
}

@CHARSET "UTF-8";
#mydiv{
	position: absolute;
	left:50%;
	top:50%;
	margin-left: -200px;
	margin-top: -50xp;
}
#keyword{
	width:500px;
	height: 25px;
}

.mouseOver{
	background: #708090;
	color:#fffafa;
}
.mouseOut{
	background: #fffafa;
	color:#000000;
}

package cn.lanz.test;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

public class SearchServlet extends HttpServlet {

	static List<String> datas=new ArrayList<String>();
	static{
		//模拟数据
	
		datas.add("ajax");
		datas.add("php");
		datas.add("javascript");
		datas.add("java");
		datas.add("html");
	}
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		resp.setCharacterEncoding("utf-8");
		//获得客户端数据
		 String keyword=req.getParameter("keyword");
		 //进行处理
		 List<String> listData=getData(keyword);
		 //返回json
//		 JSONArray.fromObject(listData);
		 System.out.println(JSONArray.fromObject(listData)); 
		 resp.getWriter().write(JSONArray.fromObject(listData).toString());
		 
	}

	public List<String> getData(String keyword){
		
		List<String> list=new ArrayList<String>();
		for (String data : datas) {
			if(data.contains(keyword)){
				list.add(data);
			}
		}
		return list;
	}
}

commons-beanutils-1.7.0.jar
commons-collections-3.2.1.jar
commons-httpclient-3.1.jar
commons-lang-2.3.jar
commons-logging-1.1.1.jar
ezmorph-1.0.3.jar
json-lib-2.2.3-jdk15.jar