注意:
1、本功能实现类似Google自动提示的效果,通过ajax引擎从服务器获取,返回XML数据；
2、本示例程序没考虑性能问题；
3、不支持Firefox浏览器，因为该浏览器没有propertychange事件。
步骤:
1、创建一个名为GoogleServlet的Servlet，负责从数据库中读取数据并生成XML格式的数据。
package com.aptech.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class GoogleServlet extends HttpServlet {
public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml;charset=utf-8");
request.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String key = request.getParameter("key");
try {
Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
Connection conn = DriverManager.getConnection("jdbc:sqlserver://127.0.0.1:1433;DatabaseName=northwind", "sa", "");
PreparedStatement pstmt = conn.prepareStatement("select shipname, count(shipname) as c from [orders] where shipname like ? group by shipname");
pstmt.setString(1, key + "%");
ResultSet rs = pstmt.executeQuery();
StringBuilder xml = new StringBuilder();
xml.append("<results>");
if(rs != null){
while(rs.next()){
xml.append("<result key=""" + rs.getString(1) + """ count=""" + rs.getInt(2) + """></result>");
}
}
xml.append("</results>");
rs.close();
pstmt.close();
conn.close();
out.print(xml.toString());
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
out.flush();
out.close();
}
}
2、定义一个名为google.html的HTML文件，负责动态生成自动提示的效果。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>google.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
var line = 0;
function del(){
if($("#newDiv")){
$("#newDiv").remove();
line = 0;
}
}
$(document).ready(function(){
//文本框失去焦点时层消失
$(document.body).click(function(){
del();
});
$(document).keydown(function(){
// 38 上 40下 13 回车
if($("#newDiv")){
if(event.keyCode == 40){
$("table tbody tr").eq(line)
.css("backgroundColor", "blue")
.css("color", "white");
$("table tbody tr").eq(line < 0 ? 0 : line - 1)
.css("backgroundColor", "white")
.css("color", "black");
line = (line == $("table tbody tr").length ? 0 : line + 1);
}else if(event.keyCode == 38){
line = (line == 0 ? $("table tbody tr").length : line - 1);
$("table tbody tr").eq(line)
.css("backgroundColor", "blue")
.css("color", "white");
$("table tbody tr").eq(line > $("table tbody tr").length ? 0 : line + 1)
.css("backgroundColor", "white")
.css("color", "black");
}else if(event.keyCode == 13){
$("#key").val($("table tbody tr").eq(line - 1).find("td").eq(0).html());
del();
}
}
});
$("#key").bind("propertychange", function(){
del();
var top = $("#key").offset().top;
var left = $("#key").offset().left;
var newDiv = $("<div/>").width($("#key").width() + 6)
.css("position", "absolute")
.css("backgroundColor", "white")
.css("left", left)
.css("top", top + $("#key").height() + 6)
.css("border", "1px solid blue")
.attr("id", "newDiv");
var table = $("<table width='100%'/>")
.attr("cellpadding", "0")
.attr("cellspacing", "0");
$.post("GoogleServlet", {key: $("#key").val()}, function(xml){
$(xml).find("results result").each(function(){
var key = $(this).attr("key");
var count = $(this).attr("count");
var tr = $("<tr/>").css("cursor", "pointer").mouseout(function(){
$(this).css("backgroundColor", "white").css("color", "black");
}).mouseover(function(){
$(this).css("backgroundColor", "blue").css("color", "white");
}).click(function(){
$("#key").val($(this).find("td").eq(0).html());
del();
});
var td1 = $("<td/>").html(key).css("fontSize", "12px")
.css("margin", "5 5 5 5");
var td2 = $("<td/>").html("共有" + count + "个结果")
.attr("align", "right").css("fontSize", "12px")
.css("color", "green").css("margin", "5 5 5 5");
tr.append(td1).append(td2);
table.append(tr);
newDiv.append(table);
});
});
$(document.body).append(newDiv);
if($("#key").val() == ""){
$("#newDiv").remove();
}
});
});
</script>
</head>
<body>
<h1>Google搜索</h1>
<div style="margin-top: 20px; margin-left: 30px">
请输入搜索关键字:<input name="key" id="key" style="width: 300">
<input type="button" value="Goolge一下">
</div>
</body>
</html>
3、最后的效果：
分享到：
相关推荐
一个很好用的，用来模拟google搜索引擎自动提示，有好多的例子，基于jQuery实现
9.jquery仿google首页图标动画菜单效果实现模拟鼠标动画菜单的代码 10.jquery仿卓越亚马逊网鼠标移到按钮弹出菜单的效果代码 11.jquery浮动变化的个性菜单插件floatmenu下载 12.jQuery黑色风格仿Flash版下滑...
《超实用的jQuery代码段》的代码跨平台、跨设备、跨浏览器，充分向读者演示了如何使用jQuery的各项技术，实现令人激动的网页效果。 《超实用的jQuery代码段》从jQuery框架的使用原理与应用场景出发，对最实用的...
autopoint.js代码: 代码如下: /* * @date: 2010-5-22 21:42:15 * @author: 胡灵伟 * Depends: * jquery.js * * function:类似GOOGLE搜索框提示功能 */ (function($) { $.fn.autopoint = function (options) { ...
昨天研究了一下Jquery 模仿Baidu、Google收索时自动补充收索结果的提示，感觉效果还行，下面与大家分享下代码
Ajax模仿google提示输入框 使用说明 v1.8 本程序由飞飞asp乐园编写 ************************************************* 特别感谢： 一杯白开水 网友 的帮助 版本所提的修改建议 *********************************...
16.当输入框失去焦点时，提示框会自动隐藏 ######V1.8解决问题############ 17.解决了鼠标无法选择的问题 ****************************************************************** 文件使用说明： 在需要使用的页面...
创建一个使用嵌入的提示指令246 理解指令定义中的replace属性247 理解指令定义中的transclude属性248 使用ng—transclude插入嵌入元素248 理解嵌入作用域248 92创建和使用嵌入函数250 使用$compile服务创建一...
Java绘制图片火焰效果，源代码相关注释：前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...
Java绘制图片火焰效果，源代码相关注释：前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...