已修复bug、原因及解决方案：
1、自动补全提示框背景透明，导致与其后面的字重叠，最简单的办法，就是为<div>设置背景颜色。
2、当把文本框中的字删完了依然会弹出提示，解决方案，见代码。
3、当用户按回车选择自动补全提示框中高亮的条目时，同时也将文本框所在的form提交，但是提交的却并不是选中的条目而是之前在文本框中的文本。 解决方案，在回车事件监控后面加上$("form:first").submit();具体见代码。
还有什么bug暂时么有发现，如果新发现了请留言告知，十分感谢~大家共同学习~！~
以下是比较关键的代码了：
网页：
<head>
……………………
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jqueryauto.js"></script>
</head>
<body>
JQueryAutoComplete <input type="text" id="word" />
<input type="button" value="submit" /><br>
<div id="auto"></div>
</body>
重头戏在这，感慨一句，万能的刀勒符号啊！！
JavaScript：jqueryauto.js
//表示当前高亮的节点
var highlightindex = -1;
var timeoutId;
$(document).ready(function(){
var wordInput = $("#word");
var wordInputOffset = wordInput.offset();
//隐藏自动补全框并通过CSS设置补全框的位置大小及样式
$("#auto").hide().css("border","1px black solid").css("position","relative").css("background-color","white")
.css("top",wordInputOffset.top+wordInput.height()+ 5 +"px")
.css("left",wordInputOffset.left).width(wordInput.width() + 2); //此处可根据自己的网页布局以及页面元素大小调整。
//添加键盘按下并弹起的事件
wordInput.keyup(function(event){
//处理文本框中的键盘事件
var myEvent = event||window.event;
var keyCode = myEvent.keyCode;
//如果输入的是字母，退格，delete，空格或者数字键，应该将文本框中的最新信息发送给服务器,其中，空格键和数字键的加入使得输入中文也能支持~~
if((keyCode >= 65 && keyCode<=90) || (keyCode >= 48 && keyCode <= 57) ||(keyCode>=96 && keyCode<=105) || keyCode == 46 || keyCode == 8 || keyCode == 32){
//获取文本框的内容
var wordText = $("#word").val();
var autoNode = $("#auto");
if(wordText!=""){//2009.6.7 UPDATE：之前在这加上了退格与delete的keyCode的判断，实际上是没有必要的。
//将文本框中的内容发送到服务器端
//对上次未完成的延时操作进行取消
clearTimeout(timeoutId);
//对于服务器端进行交互延迟500ms，避免快速打字造成的频繁请求
timeoutId = setTimeout(function(){
$.post("AutoCompleteServlet",{word:wordText},function(data){
//将dom对象data转换成JQuery的对象
var jqueryObj = $(data);
//先找到所有的word节点
var wordNodes = jqueryObj.find("word");
//遍历所有的word节点，取出单词内容将单词内容添加到弹出框中
autoNode.html(" ");
wordNodes.each(function(i){
//获取单词内容
var wordNode = $(this);
//新建div节点将单词内容加入到新建的节点中,将新建的节点加入到弹出框的节点中
var newDivNode = $("<div>").attr("id",i);
newDivNode.html(wordNode.text()).appendTo(autoNode);
//增加鼠标进入事件，高亮节点;
newDivNode.mouseover(function(){
if(highlightindex != -1){
$("#auto").children("div").eq(highlightindex).css("background-color","white");
}
highlightindex = $(this).attr("id");
$(this).css("background-color","yellow");
});
//增加鼠标移出事件，取消当前高亮节点
newDivNode.mouseout(function(){
$(this).css("background-color","white");
});
//增加鼠标点击事件，可以进行补全
newDivNode.click(function(){
var comText = $(this).text();
$("#auto").hide();
highlightindex=-1;
$("#word").val(comText);
});
});
//如果服务器端有数据返回，则显示弹出框
if(wordNodes.length>0){
autoNode.show();
}else {
autoNode.hide();
highlightindex=-1;
}
},"xml");
},500);
}else{
autoNode.hide();
highlightindex=-1;
}
} else if(keyCode == 38 || keyCode==40){
//如果输入的是向上38向下40按键
if(keyCode == 38){
//up
var autoNodes = $("#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;
}
//让现在被高亮的内容变成黄色
autoNodes.eq(highlightindex).css("background-color","yellow");
}
if(keyCode == 40){
//down
var autoNodes = $("#auto").children("div");
if(highlightindex !=-1)
{
autoNodes.eq(highlightindex).css("background-color","white");
}
highlightindex++;
if(highlightindex == -1){
//如果修改索引值以后index变成-1，则将索引中指向最后一个元素
highlightindex = 0;
}
//让现在被高亮的内容变成黄色
autoNodes.eq(highlightindex).css("background-color","yellow");
}
}else if(keyCode == 13){
//如果按下的是回车
//下拉框有高亮的内容
if(highlightindex !=-1)
{
var comText = $("#auto").hide().children("div").eq(highlightindex).text();
highlightindex=-1;
$("#word").val(comText); //将文本框内容改成选中项
$("form:first").submit(); //提交form。若没有这句话，按下回车后，仅仅只改变了文本框里的内容，但是由于form本身就监控了回车按键默认为submit，提交的是文本框改变之前的内容，解决这个问题最简单的方式就是在文本框内容改变以后强制提交form的内容，此时，提交的内容就是选中项。
}
//下拉框没有高亮的内容
else{
$("#auto").hide();
//让文本框失去焦点
$("#word").get(0).blur();
}
}
});
})
Servlet的doGet方法代码：
request.setCharacterEncoding("UTF-8");
String word = request.getParameter("word");
//String word = new String(request.getParameter("word").getBytes("ISO-8859-1"),"UTF-8");
System.out.println(word);
try {
FileReader fr= new FileReader("D:\\study\\javaworkspace\\googleSuggestTest\\src\\wordbase.dic");
//可以根据服务器端不同的字典或者数据库修改。此处仅是示例而已。。。。
BufferedReader br = new BufferedReader(fr);
ArrayList<String> qlist = new ArrayList<String>();
String row;
while((row=br.readLine())!=null)
{
if(row.startsWith(word))
{
qlist.add(row);
if(qlist.size()==10)
{
break;
}
}
}
fr.close();
request.setAttribute("words", qlist);
request.setAttribute("word",word);
request.getRequestDispatcher("wordxml.jsp").forward(request, response);
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
wordxml.jsp：
<%@ page language="java" contentType="text/xml; charset=utf-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<words>
<c:forEach var="word" items="${words}">
<word>${word}</word>
</c:forEach>
</words>
大致的主要流程就是JavaScript获取文本框内的鼠标事件，将内容发送至服务器端，服务器端根据关键字查询获得数据后以xml形式返回给客户端，处理以后通过css来控制<div>的显示，最终完成自动补全功能。
分享到：
相关推荐
在本篇博客“AJAX学习总结（九）---Jquery实例：仿googlesuggest自动补全功能”中，作者分享了如何使用jQuery实现一个类似Google Suggest的自动补全功能，这是一种常见的前端交互设计，广泛应用于搜索框输入时提供...
本实例将探讨如何将这两者整合，通过AJAX技术实现一个仿Google Suggest的自动补全功能，该功能通常用于输入框中，为用户提供动态搜索建议。我们将详细解析这个实例中的各个组成部分。 首先，`index.jsp`是用户界面...
本教程将详细讲解如何实现一个仿GoogleSuggest的自动补全功能，旨在提供一个绝对实用的解决方案。 首先，理解GoogleSuggest的工作原理至关重要。它基于用户在搜索框中输入的字符，实时从服务器端获取并展示可能的...
【标题】"GoogleSuggest ajax自动补全"是基于AJAX和jQuery技术实现的一个功能，它主要用于提升用户体验，提供在用户输入时实时显示搜索建议的功能。这个功能在很多搜索引擎和网站中都有应用，比如Google搜索，它能...
JavaScript Suggest自动补全的输入框下拉提示类是一种常见的前端开发技术，广泛应用于各种Web应用，如搜索引擎、表单输入、代码编辑器等。它为用户提供了一个方便、高效的交互体验，通过预测用户可能要输入的内容，...
在提供的压缩包文件"GoogleSuggest"中，可能包含了一个关于谷歌搜索建议的示例，它展示了如何使用jQuery UI Autocomplete来模拟谷歌搜索的自动补全效果。通过分析和学习这个示例，你可以更深入地理解如何与服务器...
jQuery Suggest插件就是这样一个工具，它为网页中的输入框提供了自动补全功能，使得用户在输入时能快速找到并选择所需的内容，大大提高了输入效率。本篇文章将深入探讨jQuery Suggest插件的使用方法、原理以及如何...
修改网上的代码完成的，使用jquery+JavaScript形式写的，服务端代码用java编写，当然你可以用其他任何语言编写。suggest是MyEclipse的一个工程，直接import既可用。也可以提取里面的文件自己修改
**jQuery 实例5：仿 Google Suggest 自动补全** 在网页开发中，提供自动补全功能能够极大地提升用户体验，尤其是在搜索或者输入框输入时。Google 的搜索建议就是这一功能的经典应用，它能够根据用户输入的关键词...
**Ajax仿Google Suggest数据库版**是基于Ajax技术实现的一种搜索建议功能，它模拟了Google搜索引擎在用户输入关键字时实时显示搜索建议的效果。这个项目主要使用Java作为后端语言，结合Ajax技术，为前端用户提供流畅...
本项目“模拟GoogleSuggest自动补全功能”旨在通过Ajax实现与Google搜索相似的实时建议效果，提高用户体验。下面我们将深入探讨Ajax的基础概念、工作原理以及如何应用于创建自动补全功能。 Ajax的核心思想是利用...
jQuery 自动补全插件（jQuery UI Autocomplete）是实现这一功能的强大工具，它基于流行的 jQuery JavaScript 库，提供了简单而灵活的接口来创建高效的自动补全效果。 ### 一、jQuery UI Autocomplete 基本概念 ...
首先，"jquery 自动补全 例子"是指使用jQuery库来创建一个自动补全的功能，这种功能通常用于在用户输入文本时提供匹配建议。这在网页设计中是非常实用的特性，尤其对于有大量可选项或需要快速查找的场景。 "jquery ...
虽然是演示，但是并不是HelloWorld那种不实用的例子，而是包含两个经典的应用：用户名检测和Google Suggest自动完成。 两个例子都做得比较细，样式也用的比较多，所以一定是可以用于实际项目中的，希望对大家有帮助...
在信息技术领域，中文输入法的拼写自动补全功能是一项重要的用户体验提升技术。它能够帮助用户快速、准确地输入文本，尤其对于输入速度较慢或者不太熟悉汉字输入的用户来说，这个功能尤为重要。本工程通过结合lucene...
【模拟 GoogleSuggest 自动补全功能】 GoogleSuggest 是谷歌搜索引擎中的一项功能，当用户在搜索框中输入关键词时，系统会实时显示与输入内容相匹配的热门搜索建议。这个功能大大提高了用户的搜索效率，减少了误输...
在C#编程中，"文本框自动完成"和"自动补全"功能是提升用户界面交互体验的重要元素，尤其在需要用户输入特定信息时。这个示例代码将帮助开发者实现这一功能，使得用户在文本框中输入时能够快速匹配到预设的建议列表，...