|
|
|
本来早就该发的，一直搞别的去了没有研究这个，这两天边看视频边自己编，把这算是搞定了，还有一点点小bug而已，并在不断更新与修正中。
已修复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>的显示，终极完成自动补全功能。 |
|
|手机版|Java学习者论坛
( 声明：本站资料整理自互联网，用于Java学习者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2011-7-31 22:10:56
发表于 2011-7-31 22:22:36