AJax 後臺程式碼：

<span style="font-size:12px;">	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		// 表示頁面傳過來的字串，用於和服務端的單詞進行完整匹配
		String keyWord = request.getParameter("keyWord");
		// 將字串儲存在request物件中
		request.setAttribute("keyWord", keyWord);
		// 將請求轉發給檢視層（注意AJAX中，這個所謂的檢視層不返回頁面，只返回資料，所以也可以稱作是一個數據層）
		request.getRequestDispatcher("keyWord.jsp").forward(request, response);
		
		out.close();
	}
</span>
 

// 表示當前高亮的節點
var highlightindex = -1;
var timoutid ;
$(document).ready(function(){
	// 自動補全框最開始應該隱藏起來
	jQuery('input[type=\'button\']').css('width',90).css('height',36+"px");
	jQuery('#keyWord').css('width',400);
	var wordInput = jQuery('#keyWord');
	
	var wordInputOffset = wordInput.offset();
	jQuery('#aout').hide().css('width',398).css('border','solid 1px ')
	.css('text-align','left')
	.css('position','absolute')
	.css('top', 124+'px' )
	.css('left', 433 + 'px');
		// 給文字框新增鍵盤按下並彈起的事件
		jQuery('#keyWord').keyup(function(event){
		// 處理文字框中的鍵盤事件
		var myEvent = event || window.event;
		var keyCode = myEvent.keyCode;
		// 如果輸入的是字母，應該將文字框中最新的資訊傳送給伺服器
		// 如果輸入的是推個鍵或刪除鍵，也應該將文字框的最新發送給伺服器
		if(keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46){
			// 變數所有的word節點，取出單子內容，然後將單詞內容新增到彈出框中
			var autoNode = jQuery('#aout');
			//1 首先獲取文字框中的內容
			var keyText = jQuery('#keyWord').val();
			// 判斷是否為空
			if(keyText != ""){
				// 2.將文字框中的內容傳送給伺服器
				// 對上次伺服器完成的延遲操作進行取消
//				clearTimeout(timoutid);
//				// 延遲
//				timoutid = setTimeout(function (){
					jQuery.post('comption?keyWord='+ encodeURI(keyText),function(data){
					// 將dom物件data轉出jQuery物件
					var jQueryobj = jQuery(data);
					// 找到所有的word節點
					var wordNodes = jQueryobj.find('keyWord')
					
					autoNode.html("");
					wordNodes.each(function(i){
						// 獲取單詞的內容
						var wordNode = jQuery(this);
						// 新建div節點，將單詞內容加入到新建的節點中
						var newDivNode = jQuery("<div>").attr("id",i) ;
						newDivNode.html(wordNode.text()).appendTo(autoNode);
						// 將新建的節點加入到譚出庫的節點中
						
						// 增加滑鼠進入事件，高亮節點
						newDivNode.mouseover(function(){
							// 將原來高亮的及誒單取消高亮
							if(highlightindex != -1){
								$('#aout').children("div").eq(highlightindex)
								.css("background-color",'white');
							}
							// 記錄新新的高亮索引
							highlightindex = jQuery(this).attr('id');
							// 滑鼠進入的及節點高亮
							jQuery(this).css("background-color",'threedlightshadow');
						});
						// 增加滑鼠移出
						newDivNode.mouseout(function (){
							jQuery(this).css("background-color",'white');
						});
						// 增加滑鼠點選事件，可以進行補全
						newDivNode.click(function (){
							 var comText = $(this).text();
							$('#aout').hide();
				 			jQuery('#keyWord').val(comText);
						});
						
					});
					// 如果伺服器端有資料返回，則顯示彈出框
					 if(wordNodes.length>0){
						autoNode.show();
					 }else{
						 autoNode.hide();
						 // 彈出框隱藏的同時，高亮節點按引值也製成-1
						 highlightindex = -1;
					 }
				
				},'xml');
					
//				},500);
				
			}else{
				autoNode.hide();
			}
		}else if(keyCode == 38 || keyCode == 40){
			// 如果輸入的是向上38向下40按鍵
			if(keyCode == 38){
				//向上
				 var autoNodes = $('#aout').children("div");
				 if(highlightindex != -1){
					 // 如果原來存在高亮節點，則將背景顏色改成白色white
					  autoNodes .eq(highlightindex).css("background-color",'white');
					  highlightindex --;
				 }else{
					 highlightindex = autoNodes.length -1;
					 
				 }
				 if(highlightindex == -1){
					 // 如果修改索引值以後index變成-1，則將索引值向最後一個元素
					 highlightindex = autoNodes.length -1;
				 }
				 // 讓現在高亮的內容變成紅色
				 autoNodes.eq(highlightindex).css("background-color",'threedlightshadow');
				  var comText = $('#aout').children("div").eq(highlightindex).text();
				 jQuery('#keyWord').val(comText);
			}
			if(keyCode == 40){
				//向下
				 var autoNodes = $('#aout').children("div");
				 if(highlightindex != -1){
					 // 如果原來存在高亮節點，則將背景顏色改成白色white
					  autoNodes .eq(highlightindex).css("background-color",'white');
				 }
				 highlightindex ++;
				 if(highlightindex == autoNodes.length){
					 // 如果修改索引值以後index變成-1，則將索引值向最後一個元素
					 highlightindex = 0;
				 }
				 // 讓現在高亮的內容變成紅色
				 autoNodes .eq(highlightindex).css("background-color",'threedlightshadow');
				 var comText = $('#aout').children("div").eq(highlightindex).text();
				 jQuery('#keyWord').val(comText);
			}
		}else if(keyCode == 13){
			// 如果輸入的回車
			
			// 下拉框有高亮內容
			if(highlightindex != -1){
				// 取出高亮節點的文字內容
				var comText = $('#aout').hide().children("div").eq(highlightindex).text();
				highlightindex = -1;
				// 文字框中的內容變成高亮節點的內容
				jQuery('#keyWord').val(comText);
			}else{
				// 下拉框沒有高亮內容
				alert("文字框中的["+jQuery('#keyWord').val()+"] 被提交了");
				$('#aout').hide();
				// 讓文字框失去焦點
				jQuery('#keyWord').get(0).blur();
			}
		}
	});
	
	// 給按鈕新增事件，表示文字框中的資料提交
	jQuery('input[type=\'button\']').click(function(){
		alert(encodeURI('文字框中的[' + jQuery('#keyWord').val() + ']被提交了'));	
	});
});
 

JSP：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.10.1.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jqueryaout.js"></script>
    <style type="text/css">
    	.gao{
    		height: 30px;
			border-right-width: 2px;
			border-bottom-width: 1px;
			border-left-width: 1px;
			border-top-width:2px;
			border-bottom-style: gainsboro;
			border-left-style: gainsboro;
			border-right-color: scrollbar;
			border-bottom-color: scrollbar;
			line-height:30px;
			font-size:18px;
			
    	}
    </style>
  </head>
  
  <body >
  <center><img alt="" src="imgae/907180034.png"><br/>
 		 <input type="text" id="keyWord" class="gao" />  <input type="button" value=" 百度一下  "/>
 			 <div id="aout"  ></div>
   	</center>
  </body>
</html>
 

<!-- 
	itcast的ajax補全例項
 --> 
 <!-- 與傳統應用檢視層不同，這個jsp返回的是xml的資料，因此contentType -->
<%@ page contentType="text/xml;charset=UTF-8"  language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String keyWord = (String) request.getParameter("keyWord");
%>
<words>
<% if("李景".startsWith(keyWord)){%>
	<keyWord>李景</keyWord>
<% }%>	
<% if("李小龍".startsWith(keyWord)){%>
	<keyWord>李小龍</keyWord>
<% }%>	
<% if("李連杰".startsWith(keyWord)){%>
	<keyWord>李連杰</keyWord>
<% }%>	
<% if("李世民".startsWith(keyWord)){%>
	<keyWord>李世民</keyWord>
<% }%>	
<% if("李剛".startsWith(keyWord)){%>
	<keyWord>李剛</keyWord>
<% }%>	


<% if("劉德華".startsWith(keyWord)){%>
	<keyWord>劉德華</keyWord>
<% }%>	
<% if("劉亦菲".startsWith(keyWord)){%>
	<keyWord>劉亦菲</keyWord>
<% }%>	
<% if("劉翔".startsWith(keyWord)){%>
	<keyWord>劉翔</keyWord>
<% }%>	
<% if("劉玉梅".startsWith(keyWord)){%>
	<keyWord>劉玉梅</keyWord>
<% }%>	
<% if("周鵬".startsWith(keyWord)){%>
	<keyWord>周鵬</keyWord>
<% }%>	
<% if("周潤發".startsWith(keyWord)){%>
	<keyWord>周潤發</keyWord>
<% }%>	
<% if("周星馳".startsWith(keyWord)){%>
	<keyWord>周星馳</keyWord>
<% }%>	
<% if("張學友".startsWith(keyWord)){%>
	<keyWord>張學友</keyWord>
<% }%>	
<% if("張雨綺".startsWith(keyWord)){%>
	<keyWord>張雨綺</keyWord>
<% }%>	
<% if("張宇".startsWith(keyWord)){%>
	<keyWord>張宇</keyWord>
<% }%>	
<% if("小劉".startsWith(keyWord)){%>
	<keyWord>小劉</keyWord>
<% }%>		
<% if("asdfg".startsWith(keyWord)){%>
	<keyWord>asdfg</keyWord>
<% }%>	
<% if("asdfdd".startsWith(keyWord)){%>
	<keyWord>asdfdd</keyWord>
<% }%>	
<% if("ajhksd".startsWith(keyWord)){%>
	<keyWord>ajhksd</keyWord>
<% }%>	
<% if("asda".startsWith(keyWord)){%>
	<keyWord>asda</keyWord>
<% }%>	
</words>