自动补全

来源：互联网发布：全速网络待遇如何编辑：程序博客网时间：2024/06/10 13:06

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>
   
<body>
   <input type="text" id="word"/>
   <input type="button" value="提交"/>
   <div id="auto"></div>
</body>
</html>

4.建一个js文件(test_8.js)

//---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

?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

分类： 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()+"】被提交了");

})

})