我正要用yui做開發
服務器端：
AutoComp.java-------------------------------
package ajaxdemo1;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.util.*;
public class AutoComp extends HttpServlet {
private static final String CONTENT_TYPE = "text/xml; charset=UTF-8";
//Initialize global variables
public void init() throws ServletException {
}
//Process the HTTP Get request
public void doGet(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
response.setContentType(CONTENT_TYPE);
//務必清空頁面緩存
response.addHeader("Cache-Control","no-cache");
System.out.println("url = " + request.getRequestURL() + "?" + request.getQueryString());
String query = request.getParameter("query");
PrintWriter out = response.getWriter();
out.print("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
out.print("<Resultset>");
for(int i=0;i<40;i++){
out.print("<Result>");
out.print("<Title>title"+i+"</Title>");
out.print("<Summary>Hello World"+i+"!</Summary>");
out.print("</Result>");
}
out.print("</Resultset>");
out.close();
}
//Process the HTTP Post request
public void doPost(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
doGet(request, response);
}
//Clean up resources
public void destroy() {
}
}
index.jsp================================
<%@ page contentType="text/html; charset=GBK" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<title>AJAX測試文件</title>
<link rel="stylesheet" type="text/css" href="build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="build/autocomplete/assets/skins/sam/autocomplete.css" />
<script type="text/javascript" src="build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="build/animation/animation.js"></script>
<script type="text/javascript" src="build/autocomplete/autocomplete.js"></script>
<script type="text/javascript" src="build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="build/event/event.js"></script>
<script type="text/javascript" src="build/connection/connection.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for this example */
#ysearchautocomplete{
margin-bottom:2em;
width:25em;
}
</style>
</head>
<body class="yui-skin-sam">
<form action="
http://localhost:8080/ajax" onsubmit="return YAHOO.example.ACXml.validateForm();">
<h3>Yahoo! Search:</h3>
<div id="ysearchautocomplete">
<input id="ysearchinput" type="text" name="p">
<div id="ysearchcontainer"></div>
</div>
</form>
<script type="text/javascript" >
YAHOO.example.ACXml = new function(){
// Instantiate an XHR DataSource and define schema as an array:
// ["Multi-depth.object.notation.to.find.a.single.result.item",
// "Query Key",
// "Additional Param Name 1",
// ...
// "Additional Param Name n"]
this.oACDS = new YAHOO.widget.DS_XHR("
http://localhost:8080/ajax/autocomp", ["Result", "Title", "Summary"]);
this.oACDS.responseType = YAHOO.widget.DS_XHR.TYPE_XML;
//this.oACDS.queryMatchContains = true;
//this.oACDS.scriptQueryAppend = ""; // Needed for YWS
// Instantiate AutoComplete
this.oAutoComp = new YAHOO.widget.AutoComplete("ysearchinput","ysearchcontainer", this.oACDS);
// Display up to 20 results in the container
this.oAutoComp.maxResultsDisplayed = 10;
// Require user to type at least 1 characters before triggering a query
this.oAutoComp.minQueryLength = 1;
// Every key input event will trigger an immediate query...
this.oAutoComp.queryDelay = 0;
// ...or queries will be sent after 3 seconds have passed
// since the last key input event
//this.oAutoComp.queryDelay = 3;
// Do not automatically highlight the first result item in the container
this.oAutoComp.autoHighlight = false;
// Enable a drop-shadow under the container element
this.oAutoComp.useShadow = true;
// Enable an iFrame shim under the container element
this.oAutoComp.useIFrame = true;
this.oAutoComp.formatResult = function(oResultItem, sQuery) {
return oResultItem[0] + " " + oResultItem[1];
};
// Stub for AutoComplete form validation
this.validateForm = function() {
// Validation code goes here
return true;
};
};
</script>
</body>
</html>