您的位置：首页 > Web前端 > JQuery

用Jquery实现模仿Google 搜索提示功能

2008-09-26 22:09 681 查看

JqueryAutoComplete.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jquery autoComplete</title>
<meta http-equiv="Content-Type" content="text/html;gb2312">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryautocomplete.js"></script>
</head>
<body>
<h3>Jquery autoComplete</h3>
用Jquery实现模仿Google 搜索提示功能
<input type="text" id="word" size="20"/>
<input type="button" value="提交"/><br>
<div id="auto"></div>
</body>
</html>

jqueryautocomplete.js

// 显示高亮对应的数组的索引
var highlightindex = -1;
//提示延迟
var timeOutId;
$(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() + 5 + "px")
.css("left", wordinputoffset.left + "px")
.width(wordinput.width() + 2 + "px");
//键盘事件
$("#word").keyup(function(event) {
var myEvent = event || window.event;
//获取当前键值
var keyCode = myEvent.keyCode;
// 按下字母键和退格、delete键
if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46) {
var wordText = $("#word").val();
var autoNode = $("#auto");
//只有输入框中有值时才向服务器发送请求
if (wordText != "") {
//取消上次未完成的操作
clearTimeout(timeOutId);
//对服务器的请求延迟200ms
timeOutId = setTimeout(function(){
$.post("AutoComplete", {word:wordText}, function(data) {
//将dom对象转化为jquery对象
var jqueryObj = $(data);
//找到所有的word节点
var wordNodes = jqueryObj.find("word");
//遍历前清空原来的内容
autoNode.empty();
wordNodes.each(function(i) {
var wordNode = $(this);
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", "red");
});
newDivNode.mouseout(function() {
$(this).css("background-color", "white");
});
//点击获取选中的值
newDivNode.click(function(){
$("#word").val( $(this).text());
highlightindex = -1;
$("#auto").hide();
});
});
if (wordNodes.length > 0) {
autoNode.show();
} else {
autoNode.hide();
highlightindex = -1;
}
}, "xml");
},200);
}
else {
autoNode.hide();
highlightindex = -1;
}
}
// 按下上下键
else if (keyCode == 38 || keyCode == 40) {
//按下向上键后
if (keyCode == 38) {
//取得提示框中的各个div
var autoNodes = $("#auto").children("div");
if (highlightindex != -1) {
//如果当前有高亮节点，则把该高亮节点背景色变为非高亮背景色
autoNodes.eq(highlightindex).css("background-color", "white");
highlightindex --;
} else {
highlightindex = autoNodes.length - 1;
}
if (highlightindex == -1) {
highlightindex = autoNodes.length - 1;
}
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 ++;
} else {
highlightindex = 0;
}
if (highlightindex == autoNodes.length) {
highlightindex = 0;
}
autoNodes.eq(highlightindex).css("background-color", "red");
}
}
// 按下回车
else if (keyCode == 13) {
if (highlightindex != -1) {
var conText = $("#auto").hide().children("div").eq(highlightindex).text();
highlightindex = -1;
$("#word").val(conText);
} else {
alert("文本框中的内容【" + $("#word").val() + "】被提交了");
$("#auto").hide();
$("#word").blur();
}
}
});
$("input[type='button']").click(function() {
alert("文本框中的内容【" + $("#word").val() + "】被提交了");
});
});

AutoComplete.java(别忘了在web.xml里面配置哦！)

import com.sun.deploy.net.HttpRequest;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpServlet;
import javax.servlet.ServletException;
import java.io.IOException;

/**
* Created by IntelliJ IDEA.
* User: Administrator
* Date: 2008-9-24
* Time: 21:39:17
* To change this template use File | Settings | File Templates.
*/
public class AutoComplete extends HttpServlet {
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
String word = httpServletRequest.getParameter("word");
httpServletRequest.setAttribute("word", word);
httpServletRequest.getRequestDispatcher("wordxml.jsp").forward(httpServletRequest, httpServletResponse);
// httpServletResponse.sendRedirect("wordxml.jsp");
}

protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest, httpServletResponse);
}
}

wordxml.jsp

<%@ page contentType="text/xml;charset=UTF-8" language="java" %>
<%
String word = (String)request.getAttribute("word");
%>
<words>
<% if(("absolute").startsWith(word)){ %>
<word>absolute</word>
<%}%>
<% if(("apple").startsWith(word)){ %>
<word>apple</word>
<%}%>
<% if(("anything").startsWith(word)){ %>
<word>anything</word>
<%}%>
<% if(("anybody").startsWith(word)){ %>
<word>anybody</word>
<%}%>
<% if(("body").startsWith(word)){ %>
<word>body</word>
<%}%>
<% if(("bobo").startsWith(word)){ %>
<word>bobo</word>
<%}%>
<% if(("baby").startsWith(word)){ %>
<word>baby</word>
<%}%>
<% if(("cut").startsWith(word)){ %>
<word>cut</word>
<%}%>
<% if(("cetuegte").startsWith(word)){ %>
<word>cetuegte</word>
<%}%>
</words>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航