googledata.xml
<?xml version="1.0" encoding="UTF-8"?>
<data>
<element>google map</element>
<element>google</element>
<element>google bar</element>
<element>google searching</element>
<element>google news</element>
<element>google dog</element>
<element>google cat</element>
<element>google haha</element>
<element>China</element>
<element>China Mobile</element>
<element>China Unicom</element>
<element>China People</element>
<element>中国</element>
<element>中国移动</element>
<element>中国联通</element>
<element>中国人</element>
<element>黄增话</element>
<element>黄增花</element>
<element>黄曾华</element>
<element>黄天化</element>
</data>
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
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>My JSP 'index.jsp' starting page</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">
-->
<script type="text/javascript">
/*************声明xmlHttp*************/
var xmlHttp;
var selectData=new Array();
/*************创建xmlHttp*************/
function createXMLHttpReauest(){
if (window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
/*************当松开键时所执行的方法*************/
function doSearchText(){
if(getInputText()== ""){
hiddenShowDiv();
return;
}
createXMLHttpReauest();
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.open("GET","googledata.xml",true);
xmlHttp.send(null);
}
/*************对xmlHttp返回的数据做处理*************/
function handleStateChange(){
if(xmlHttp.readystate==4){
if(xmlHttp.status==200){
callBack();
}
}
}
/*************得到输入的数据*************/
function getInputText(){
var inputText = document.getElementById("searchText").value;
return inputText;
}
/*************输入数据的长度*************/
function getInputTextLength(){
return getInputText().length;
}
/*************隐藏 显示数据的 DIV*************/
function hiddenShowDiv(){
document.getElementById("showDIV").style.display = "none";
}
/*************得到提交返回的数据*************/
function getBackData(){
var results = xmlHttp.responseXML;
var properties=results.getElementsByTagName("element");
return properties;
}
/*************处理返回的数据，包括将之塞到DIV中*************/
function callBack(){
var property;
var intNum=0;
var properties = getBackData();
selectData=new Array();
for(var i=0;i<properties.length;i++){
property=properties[i].firstChild.nodeValue;
if(getInputText() == property.substring(0,getInputTextLength())){
selectData[intNum]=property;
intNum++;
}
}
if(selectData.length!=0){
document.getElementById("showDIV").style.display = "block";
var resultList = "";
for(var i=0;i<selectData.length;i++){
resultList += selectData[i]+"<br>";
}
document.getElementById("showDIV").innerHTML=resultList;
}else{
hiddenShowDiv();
}
}
</script>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div style="text-align:center;">
<input type="text" id="searchText" onkeyup="doSearchText()" style="width:250;height:20;border:1px solid green;">
<div id="showDIV" style="width:250;border:1px solid green;display:none;text-align:left;border-top:0px;"></div>
</div>
</body>
</html>