使用jQuery模拟Google的自动提示效果
注意:
1、本功能使用SqlServler2000中的示例数据库Northwind,请打SP3或SP4补丁；
2、请下载jQuery组件,河西FTP中有下载；
3、本功能实现类似Google自动提示的效果,通过ajax引擎从服务器获取,返回XML数据；
4、本示例程序没考虑性能问题；
5、不支持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、最后的效果：
使用jQuery模拟Google的自动提示效果的更多相关文章
- jquery 实现邮箱输入自动提示功能：（二）
上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件: 先展示结果如图: html代码: <center> <h1>输入邮箱试试!< ...
- [DevExpress]利用LookUpEdit实现类似自动提示效果
原文:[DevExpress]利用LookUpEdit实现类似自动提示效果 关键代码: public static void BindWithAutoCompletion(this LookUpEdi ...
- 【搜索引擎】 PostgreSQL 10 实时全文检索和分词、相似搜索、模糊匹配实现类似Google搜索自动提示
需求分析 要通过PostgreSQL实现类似Google搜索自动提示的功能,例如要实现一个查询海量数据中的商品名字,每次输入就提示用户各种相关搜索选项,例如淘宝.京东等电商查询 思路 这个功能可以用 ...
- jquery 实现邮箱输入自动提示功能
邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 ...
- jquery 实现邮箱输入自动提示功能：（一）
记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作 ...
- jQuery实现的简单文字提示效果模拟title(转)
来源 http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html 模拟title实现效果,可以修改文字的样式,换行等. 文件下载: ...
- jquery ui autocomplete 模拟百度搜索自动提示
直接上代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...
- JQuery模拟实现天猫购物车动画效果
测试程序源代码下载地址:源码 一.功能描述: 1.点击购买按钮,模拟抛物线将物品弹到购物车里: 2.购物车添加物品后,显示+1动画: 效果图如下: 实现如下: 1.导入jquery相关的包: < ...
- 如何在myeclipse中实现jquery的自动提示功能
在web开发过程中,myeclipse中jsp可以实现自动提示功能,但是jquery代码却无法实现自动提示,需要自己一个个手动去输入,效率过低,怎么办? 工具/原料 jquery 1.8.3.js ...
随机推荐
- [Oracle] SQL*Loader 详细使用教程（5）- 典型例子
本文介绍SQL*Loader在实际使用过程中经常用到的典型例子. 1. 表中的列比数据文件的列要少怎么办? 假设一个csv的文件如下: a1,a2,a3,a4 b1,b2,b3,b4 c1,c2,c3 ...
- Struts2漏洞分析，漏洞波及全系版本
Struts漏洞分析 Apache Struts团队已经发布了Struts 2.3.15.1安全更新版本.在Struts2.3.15.1版本之前,存在着严重的安全漏洞,如果现在一些比较大的网站是 ...
- ssh 安装笔记
debian 6.0 的一台32位机器,aptitude search openssh-server-x509 没结果(其他机同样源配置是有结果的),于是上内部源下载openssh-server-x5 ...
- Tp框架中模板中if条件如何使用？
- ubuntu——printk()函数总结，关于日志文件
我们在使用printk()函数中使用日志级别为的是使编程人员在编程过程中自定义地进行信息的输出,更加容易地掌握系统当前的状况. 对程序的调试起到了很重要的作用. (下文中的日志级别和控制台日志控制级别 ...
- 数据库选型之内存数据库eXtremeDB
刘勇 Email:lyssym@sina.com 简介 鉴于内存数据库访问速率快的特点,本文分别从单线程.多线程(并发访问)和多线程读/写混合访问角度对eXtremeDB数据库读写速率展开测试. ...
- 摘：C++ 枚举类型
C++ 中的枚举类型继承于 C 语言.就像其他从 C 语言继承过来的很多特性一样,C++ 枚举也有缺点,这其中最显著的莫过于作用域问题——在枚举类型中定义的常量,属于定义枚举的作用域,而不属于这个枚举 ...
- 三维模型 DAE 导出格式结合 OpenGLES 要素浅析
三维模型 DAE 导出格式结合 OpenGLES 要素浅析 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&quo ...
- android的通知栏的实现
package com.example.mynotification; import android.os.Bundle; import android.app.Activity; import an ...
- nginx配置文件和一些用法
fastcgi配置: location ~ \.php$ { #fastcgi_pass unix:///tmp/php-cgi.sock; fastcgi_pass unix__tmp_php5_c ...