JQuery 实现自动补全的功能
2009-12-08 15:57:53| 分类: JavaScript | 标签: |字号大中小 订阅
1.servlet中
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String word = request.getParameter("word");
request.setAttribute("word", word);
System.out.println("dd");
request.getRequestDispatcher("testXml.jsp").forward(request, response);
}
2.建一个xml文件(testXml.jsp)
<%@ page contentType="text/xml;charset=utf-8" language="java"%>
<words>
<word>aafdfds</word>
<word>afdgwe</word>
<word>aewgsdf</word>
<word>agwefsd</word>
<word>aaafdsf</word>
<word>afewtge</word>
<word>bbsfa</word>
<word>bbfsf</word>
<word>bfsfs</word>
</words>
3.Html文件
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="./jQuery/css/test.css">
<script type="text/javascript" src="./jQuery/js/jquery.js"></script>
<script type="text/javascript" src="./jQuery/test/test_8.js"></script>
<style type="text/css">
div{
table-layout: auto;
}
</style>
</head>
<!-- 实现仿GoogleSuggest自动补全的功能 -->
<body>
<input type="text" id="word"/>
<input type="button" value="提交"/>
<div id="auto"></div>
</body>
</html>
4.建一个js文件(test_8.js)
var currIndex = -1;
$(function(){
var timeInterval;
var word = $("#word");
//设置样式
$("#auto").css("border","1px solid black")
.css("position","absolute")
.css("top",word.offset().top+word.height()+1+"px")
.css("left",word.offset().left+"px")
.css("width",word.width()+"px")
.hide();
//添加键盘事件
word.keyup(function(e){
var e = e || window.event;
//如查输入的是字母或退格或删除
if(e.keyCode >= 65 && e.keyCode <= 90 || e.keyCode == 8 || e.keyCode == 46){
var auto = $("#auto");
auto.html("");
auto.hide();
currIndex = -1;
var value = word.val();
//清除事件
clearTimeout(timeInterval);
if(value != ""){
//延迟发送
timeInterval = setTimeout(ajaxPost,500);
}
}else if(e.keyCode == 38 || e.keyCode == 40){
//向上或向下
if(e.keyCode == 38){//向上
var divs = $("#auto > div");
if(currIndex != -1){
divs.eq(currIndex).css("background-color","white");
}
currIndex--;
if(currIndex == -1){
currIndex = divs.length - 1;
}
divs.eq(currIndex).css("background-color","red");
}
if(e.keyCode == 40){//向下
var divs = $("#auto > div");
if(currIndex != -1){
divs.eq(currIndex).css("background-color","white");
}
currIndex++;
if(currIndex == divs.length){
currIndex = 0;
}
divs.eq(currIndex).css("background-color","red");
}
}else if(e.keyCode == 13){
//回车
//alert("dd");
var divs = $("#auto > div");
var value = divs.eq(currIndex).text();
$("#word").val(value);
$("#auto").hide();
currIndex = -1;
}
});
$("input[type='button']").click(function(){
alert("文本框中的内容是:"+word.val());
});
});
function ajaxPost(){
var value = $("#word").val();
var auto = $("#auto");
$.post("Test8Servlet",{word:value},function(data){
//得到所有的word节点
var words = $(data).find("word");//处理XML
words.each(function(w){
var wdiv = $("<div>").attr("id",w);
wdiv.html($(this).text()).appendTo(auto);
//添加鼠标事件
wdiv.mouseover(function(){
if(currIndex != -1){
divs = $("#auto > div").eq(currIndex).css("background-color","white");
}
currIndex = this.id;
$(this).css("background-color","red");
});
wdiv.mouseout(function(){
$(this).css("background-color","white");
});
wdiv.click(function(){
$("#word").val($(this).text());
$("#auto").hide();
currIndex = -1;
});
});
//alert(words.length);
if(words.length > 0){
auto.show();
}else{
auto.hide();
currIndex = -1;
}
},"xml");
}
//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
?var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
?$("#example").autocomplete(data);
//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
jQuery实现Google搜索引擎自动补全功能(二)
(2009-08-22 23:48:15)
转载
标签:
jquery
it
分类: JAVA
欢迎回来啊,下面我们编写JQuery的js文件了,命名为jqueryauto.js,其代码如下:
//表示当前高亮的节点
var highlightindex = -1;
var settimeId;
$(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() + 4 + "px")
.css("left",wordInputOffset.left-2 + "px").width(wordInput.width() + 6);
//给文本框添加键盘按下并弹起事件
$("#word").keyup(function(event){
//处理文本框的键盘事件
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;
//如果输入的是字母,应该将文本框中最新的信息发送个服务器
//如果输入的是退格键,也应该将文本框中的最新信息发送个服务器
if(keyCode >=65 && keyCode<=90 || keyCode == 8 || keyCode ==46)
{
//1、首先获取文本框中的内容
var wordText = $("#word").val();
var autoNode = $("#auto");
if(wordText != "")
{
//2、将文本框中的内容发送给服务器段第一个参数是提交的Url地址,第二个参数是提交的内容,第三个参数是回调函数,第四个参数是返回数据类型这里是xml格式的
//对上次未完成的延迟操作进行取消
clearTimeout(settimeId);
//对于服务器端进行交互延迟500毫秒,避免快速打字造成的频繁请求
settimeId =setTimeout(function(){
$.post("AutoComplete",{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","#66cc66");
});
//增加鼠标移出事件
newDivNode.mouseout(function(){
//取消鼠标移出节点的高亮
$(this).css("background-color","white");
});
//增加鼠标点击事件,可以进行补全
newDivNode.click(function(){
//取出高亮节点的文本内容
var comText = $(this).text();
highlightindex = -1;
//文本框中的内容变成高亮节点的内容
$("#word").val(comText);
$("#auto").hide();
});
})
//如果服务器有数据返回,则显示弹出框
if(wordNodes.length>0)
{
autoNode.show();
}else
{
autoNode.hide();
//弹出框隐藏的时候,高亮节点的索引值给他变成-1
highlightindex=-1;
}
},"xml");
},500);
}else
{
autoNode.hide();
highlightindex = -1;
}
}else if(keyCode == 38 || keyCode == 40)
{
//如果输入的是向上或者向下键时
if(keyCode == 38)
{
//如果按下了向上的按键
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","#66CC66");
}
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,则将索引值指向最好一个元素
highlightindex =0;
}
//让现在高亮的内容颜色变成红色
autoNodes.eq(highlightindex).css("background-color","#66CC66");
}
}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() + "]被提交了");
$("#auto").hide();
//让文本框失去焦点
$("#word").get(0).blur();
}
}
})
//给按钮添加事件表示文本框中的数据被提交了
$("input[type='button']").click(function(){
alert("文本框中的【"+$("#word").val()+"】被提交了");
})
})
//------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------