完成的功能 如：
第步一建立一個web工程：autoCompleteStart
二 向工程新添搜尋頁面 如：
JQueryAutoComplete.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JQueryAutoComplete.html</title>
<script type="text/javascript" src="Jslib/jquery.js"></script>
<script type="text/javascript" src="Jslib/jqueryauto.js"></script>
</head>
<body>
<input type="text" id="word">
<input type="button" value="送出"/></br>
<div id="auto"></div>
</body>
</html>
三 建立一個servlert com.test.autocom.sAutoComplete.java
package com.test.autocom;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@SuppressWarnings("serial")
public class AutoComplete extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String world = request.getParameter("world");
request.setAttribute("world", world);
//在Ajax的請求當中它不傳回一個頁面，隻傳回它所請求的資料，是以也可以稱作為資料層
request.getRequestDispatcher("worldxml.jsp").forward(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
四 配置web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>AutoCompleteStart</servlet-name>
<servlet-class>com.test.autocom.AutoComplete</servlet-class>
</servlet>
<servlet>
<servlet-name>AutoComplete</servlet-name>
<servlet-class>com.test.autocom.AutoComplete</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AutoCompleteStart</servlet-name>
<url-pattern>/autoCompleteStart</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>AutoComplete</servlet-name>
<url-pattern>/AutoComplete</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
建立一個worldxml.jsp頁面用于傳回 定義查詢資料的内容
<%@ page language="java" contentType="text/xml; charset=utf-8"%>
<%
String word = (String)request.getAttribute("world");
%>
<worlds>
<%if("absolute".startsWith(word)){%>
<world>absolute</world>
<%}%>
<%if("anyone".startsWith(word)){%>
<world>anyone</world>
<%}%>
<%if("anything".startsWith(word)){%>
<world>anything</world>
<%}%>
<%if("apple".startsWith(word)){%>
<world>apple</world>
<%}%>
<%if("abandom".startsWith(word)){%>
<world>abandom</world>
<%}%>
<%if("breach".startsWith(word)){%>
<world>breach</world>
<%}%>
<%if("break".startsWith(word)){%>
<world>break</world>
<%}%>
</worlds>
在webRoot目錄下建立一個Jslib目錄并在這個目錄拷入jquery.js使用jquery必須的檔案
在這個目錄下建立jqueryauto.js 這個js檔案裡面完成js的觸發方法的操作内容如下：
//用于定位鍵盤上下時，保證傳回的資料條有光亮的部分
var heightLightIndex = -1;
var timeoutid;
$(document).ready(function(){
var wordInput = $('#word');
var wordInputOffset = wordInput.offset();
$('#auto').hide().css("border","1px black solid").css("position","absolute")
.css("top",wordInputOffset.top+wordInput.height()+5+"px")
.css("left",wordInputOffset.left+"px").width(wordInput.width()+2+"px");
//給文本添加鍵盤按下并彈起的事件
wordInput.keyup(function(event){
var myEvent = event || window.event;
var keyCode =myEvent.keyCode;
//8，46是倒退鍵和删除鍵
if(keyCode>=65&&keyCode<=90||keyCode==8||keyCode==46){
var worldText = $('#word').val();
if(worldText != ""){
//取消上次未完成都的延遲操作
clearTimeout(timeoutid);
timeoutid = setTimeout(function(){
$.post("AutoComplete",{world:worldText},function(data){
var jqueryObj = $(data);
var worldNodes = jqueryObj.find("world");
var autoNode = $('#auto');
autoNode.html("");
//each中的第一參數就是所周遊這個數組的下标
worldNodes.each(function(i){
var wordNode = $(this);
var newDivNode = $('<div>').attr("id",i);
newDivNode.html(wordNode.text()).appendTo(autoNode);;
newDivNode.mouseover(function(){
if(heightLightIndex != -1){
$('#auto').eq(heightLightIndex).css("background-color","white");
}
heightLightIndex = $(this).attr("id");
$(this).css("background-color","red");
});
newDivNode.mouseout(function(){
$(this).css("background-color","white");
});
newDivNode.click(function(){
var newDivNodeText = $(this).text();
heightLightIndex = -1;
$("#word").val(newDivNodeText);
$('#auto').hide();
});
});
if(worldNodes.length>0){
$('#auto').show();
}else{
$('#auto').hide();
heightLightIndex = -1;
}
},"xml");
},500);
}else{
$('#auto').hide();
heightLightIndex = -1;
}
}else if(keyCode == 38 || keyCode == 40){
//如果輸入的是向上 鍵
if(keyCode == 38 ){
var autoNodes = $('#auto').children("div");
if(heightLightIndex != -1){
autoNodes.eq(heightLightIndex).css("background-color","white");
heightLightIndex--;
}else{
heightLightIndex = autoNodes.length-1;
}
autoNodes.eq(heightLightIndex).css("background-color","red");
}
//向下 鍵
if(keyCode == 40 ){
var autoNodes = $('#auto').children("div");
if(heightLightIndex != -1){
autoNodes.eq(heightLightIndex).css("background-color","white");
}
heightLightIndex++;
if(heightLightIndex == autoNodes.length){
heightLightIndex = 0;
}
autoNodes.eq(heightLightIndex).css("background-color","red");
}
}else if(keyCode == 13){
if(heightLightIndex != -1){
var contentText = $('#auto').hide().children("div").eq(heightLightIndex).text();
heightLightIndex = -1;
$("#word").val(contentText)
}else{
alert("文本框中的["+$("#word").val()+"]被送出了");
$('#auto').hide();
//在某個節點上get(0)傳回本來的dom對象 在dom對象上讓文本失去焦點
$("#word").get(0).blur();
}
}
});
$("input[type='button']").click(function(){
alert("文本框中的["+$("#word").val()+"]被送出了");
});
});
![前後端分離之跨域問題[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)