《16-实现仿GoogleSuggest自动补全的功能》由会员分享，可在线阅读，更多相关《16-实现仿GoogleSuggest自动补全的功能（8页珍藏版）》请在金锄头文库上搜索。
1、AutoComplete.java：import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.ServletException;import java.io.IOException;/* Created by IntelliJ IDEA.* User: ming* Date: 2008-6-14* Time: 14:17:00* To change thi
2、s template use File | Settings | File Templates.* 接收用户端请求*/public class AutoComplete extends HttpServletprotected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException /表示页面传过来的字符串，用于和服务器段的单词进行完整匹配String word = httpServletRequ
3、est.getParameter(word);/将字符串保存在 request对象中httpServletRequest.setAttribute(word,word);/将请求转发给视图层（注意 AJAX中，这个所谓的视图层不返回页面，只返回数据，所以也可以称作使一个数据层）httpServletRequest.getRequestDispatcher(wordxml.jsp).forward(httpServletRequest, httpServletResponse); protected void doPost(HttpServletRequest httpServletReques
4、t, HttpServletResponse httpServletResponse) throws ServletException, IOException doGet(httpServletRequest, httpServletResponse); /To change body of overridden methods use File | Settings | File Templates.wordxml.jsp：absolute anyoneanythingappleabandonbreachbreakbooleanJQueryAutoComplete.html：的 JQuer
5、y示例：仿 的 JQuery示例：仿 googlesuggestjqueryauto.js：/表示当前高亮的节点var highlightindex = -1;$(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.hei
6、ght() + 5 + px).css(left,wordInputOffset.left + px).width(wordInput.width() + 2);/给文本框添加键盘按下并弹起的事件wordInput.keyup(function(event) /处理文本框中的键盘事件var myEvent = event | window.event;var keyCode = myEvent.keyCode;/如果输入的是字母，应该将文本框中最新的信息发送给服务器/如果输入的是退格键或删除键，也应该将文本框中的最新信息发送给服务器if (keyCode = 65 & keyCode ).ht
7、ml(wordNode.text().appendTo(autoNode);); /如果服务器段有数据返回，则显示弹出框if (wordNodes.length 0) autoNode.show(); else autoNode.hide();/弹出框隐藏的同时，高亮节点索引值也制成-1highlightindex = -1;,xml); else autoNode.hide();highlightindex = -1; else if (keyCode = 38 | keyCode = 40) /如果输入的是向上 38向下 40按键if (keyCode = 38) /向上var autoN
8、odes = $(#auto).children(div)if (highlightindex != -1) /如果原来存在高亮节点，则将背景色改称白色autoNodes.eq(highlightindex).css(background-color,white);highlightindex-; else highlightindex = autoNodes.length - 1; if (highlightindex = -1) /如果修改索引值以后 index变成-1，则将索引值指向最后一个元素highlightindex = autoNodes.length - 1;/让现在高亮的内容
9、变成红色autoNodes.eq(highlightindex).css(background-color,red);if (keyCode = 40) /向下var autoNodes = $(#auto).children(div)if (highlightindex != -1) /如果原来存在高亮节点，则将背景色改称白色autoNodes.eq(highlightindex).css(background-color,white);highlightindex+;if (highlightindex = autoNodes.length) /如果修改索引值以后 index变成-1，则将
10、索引值指向最后一个元素highlightindex = 0;/让现在高亮的内容变成红色autoNodes.eq(highlightindex).css(background-color,red); else if (keyCode = 13) /如果输入的是回车/下拉框有高亮内容if (highlightindex != -1) /取出高亮节点的文本内容var comText = $(#auto).hide().children(div).eq(highlightindex).text();highlightindex = -1;/文本框中的内容变成高亮节点的内容$(#word).val(comText); else /下拉框没有高亮内容alert(文本框中的 + $(#word).val() + 被提交了););/给按钮添加事件，表示文本框中的数据被提交$(inputtype=button).click(function() alert(文本框中的 + $(#word).val() + 被提交了););)
