在文本框中随着输入的值显示相关的数据，类似于搜索引擎
测试数据放在xml文件中:
1,sourceInfo.xml
<?xml version="1.0" encoding="UTF-8"?>
<list>
<label id="a">
<content>abuse</content>
<content>abstract</content>
<content>accede</content>
<content>accelerate</content>
<content>accent</content>
<content>adverb</content>
<content>adverse</content>
<content>accent</content>
<content>accelerate</content>
<content>advance</content>
<content>affect</content>
</label>
<label id="b">
<content>bake</content>
<content>baggy</content>
<content>ball</content>
<content>band</content>
<content>bed</content>
<content>beck</content>
</label>
<label id="c">
<content>copy</content>
<content>condition</content>
<content>conduct</content>
</label>
</list>
2,jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>模仿搜索引擎 ---- maple 2014.09.08</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
body{
width:800px;
margin:100px auto;
}
#rel{
position:absolute;
width:450px;
height:305px;
top:200px;
left:400px;
}
#box{
position:absolute;
width:560px;
height:50px;
top:150px;
left:400px;
}
#txtContent{
border:1px solid green;
width:450px;
height:50px;
line-height:50px;
font-size:25px;
float:left;
}
a{
text-decoration:none;
width:110px;
height:50px;
font-size:22px;
text-align:center;
font-weight:bold;
line-height:50px;
display:block;
color:white;
float:right;
background-color:#23AC3E;
}
ul{
padding:0px;
margin:0px;
}
li{
padding-left:5px;
list-style:none;
font-size:25px;
}
.focus{
background-color:#efefef;
}
.myUl{
border:1px solid #ccc;
}
</style>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript">
var txtContent; //保存文本框对象
var rel; //保存智能提示用的div对象
var ul; //无序列表对象，放每个提示信息
var focus; //按上下键时，保存当前选中项这个li对象
var JSONAjax={
xmlHttpreq : false,
createXMLHttpReq : function() { //创建XHR对象
if (window.XMLHttpRequest) {
// Mozilla
xmlHttpreq = new XMLHttpRequest();
} else {
// IE
if (window.ActiveXObject) {
try {// 比较新的版本
xmlHttpreq = new ActiveXObject("Msxml2.XMLHttp");
} catch (e) {
try {// 失败就创建比较老的版本
xmlHttpreq = new ActiveXObject("Microsoft.XMLHttp");
} catch (e) {
// 还失败就回家种田
}
}
}//end of if
}//end of else
}, //end of create
//发送请求（核心！！！）
sendreq : function(value) {
url="ReminderServlet?content="+value;
//调用创建XMLREQ对象 的方法
JSONAjax.createXMLHttpReq();
//指定回调函数
xmlHttpreq.onreadystatechange= JSONAjax.handleResponse;
//建立连接
xmlHttpreq.open("GET", url, true); //异步传输
//发送数据
xmlHttpreq.send(null);
},
//处理响应
handleResponse:function() {
// 判断XHR的状态
if (xmlHttpreq.readyState == 4) {
// 回应的状态=200,表示成功返回了服务器的内容
if (xmlHttpreq.status == 200) {
var str=xmlHttpreq.responseText;
var obj=JSON.parse(str);//解析成json对象
var len=ul.childNodes.length;
//移除ul原有项
for(var j=0;j<len;j++){
ul.removeChild(ul.firstChild);
}
//规定最多显示10条提示信息
var count=obj.count>10?10:obj.count;
//动态添加提示信息
for(var i=0;i<count;i++){
var li=document.createElement("li");
var txt=document.createTextNode(obj["a"+i]);
li.appendChild(txt);
ul.appendChild(li);
}
//如果ul中有li项，则通过添加类样式来显示边框
if(ul.childNodes.length>0){
ul.className="myUl";
}else{ //如果没有了提示项，则去除类样式
ul.className="";
}
}//end status==200
}//end readyState==4
}, //end handleResponse
//为组件添加事件：组件，要绑定的事件类型，处理事件的函数，是否捕获
addEvent: function(elm, evType, fn, useCapture){
//支持火狐
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
//支持IE
var r = elm.attachEvent(‘on‘ + evType, fn);
return r;
} else {
elm[‘on‘ + evType] = fn;
}
},
//初始化
init:function(){
txtContent=document.getElementById("txtContent");
rel=document.getElementById("rel");
ul=document.createElement("ul");
rel.appendChild(ul);//显示提示信息的无序列表放在id=rel的div块中
focus=null;
txtContent.onkeyup=function(event){
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if(keyCode==38){ //向上方向键
//alert("up");
if(focus!=null&&focus!=ul.childNodes[0]){
focus.className="";
focus=focus.previousSibling;
focus.className="focus";
//把方向键选择项的值放在文本框中
txtContent.value=focus.textContent;
}
return;
}else if(keyCode==40){ //向下
//alert("down");
if(focus==null){
focus=ul.childNodes[0];
}else if(focus==ul.lastChild){
return;
}else{
focus.className="";
focus=focus.nextSibling;
}
txtContent.value=focus.textContent;
focus.className="focus";
return;
}else if(keyCode==13){ //回车
window.location.href="http://www.baidu.com";
}
JSONAjax.sendreq(this.value);
};
},
}; //end of JSONAjax
//初始化[相当于调用 了<body > ]
JSONAjax.addEvent(window,‘load‘,JSONAjax.init,false);
</script>
</head>
<body>
<div id="box">
<input type="text" name="txtContent" id="txtContent">
<a href="#">千寻一下</a>
</div>
<div id="rel">
</div>
</body>
</html>
3，servlet
package com.maple.servlet;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
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.JSONObject;
import org.jdom.Document;
import org.jdom.Element;
import org.jdom.JDOMException;
import org.jdom.input.SAXBuilder;
public class ReminderServlet extends HttpServlet {
/**
* Constructor of the object.
*/
public ReminderServlet() {
super();
}
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
//获取输入的文本内容
String content=request.getParameter("content");
SAXBuilder sax=new SAXBuilder();
File file=new File("E:\\myJava\\javafrom20140825\\myself\\assignment_mockbaidu\\src\\sourceInfo.xml");
try {
Document doc=sax.build(file);
Element root =doc.getRootElement(); //list
List labels=root.getChildren("label");
String id=null;
//用于保存目标标签块，例如输入abu,则保存a标签块的内容
Element target=null;
JSONObject job=new JSONObject();
//寻找与输入的首字母相同的标签块
for(int i=0;i<labels.size();i++){
id=((Element)(labels.get(i))).getAttributeValue("id");
if(content.indexOf(id)==0){
target=(Element)(labels.get(i));
break;
}
}
//如果找到了与首字母匹配的标签块
if(target!=null){
List con=target.getChildren("content");
int count=0;
for(int j=0;j<con.size();j++){
Element temp=(Element)(con.get(j));
String tempContent=temp.getText();
//如果content标签内的值与文本值前面相同，则保存在json对象中，
//这是真正的有效值，需要回传给客户端
if(tempContent.indexOf(content)!=-1){
job.put("a"+count, tempContent);
++count;
}
}
//最后加上有效键值对的个数，方便客户端读取
job.put("count", count);
}
out.print(job);
} catch (JDOMException e) {
e.printStackTrace();
}
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
public void init() throws ServletException {
// Put your code here
}
}
时间： 2024-10-29 19:09:52