注意:

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的自动提示效果的更多相关文章

  1. jquery 实现邮箱输入自动提示功能：（二）

    上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件: 先展示结果如图: html代码: <center> <h1>输入邮箱试试!< ...

  2. [DevExpress]利用LookUpEdit实现类似自动提示效果

    原文:[DevExpress]利用LookUpEdit实现类似自动提示效果 关键代码: public static void BindWithAutoCompletion(this LookUpEdi ...

  3. 【搜索引擎】 PostgreSQL 10 实时全文检索和分词、相似搜索、模糊匹配实现类似Google搜索自动提示

    需求分析 要通过PostgreSQL实现类似Google搜索自动提示的功能,例如要实现一个查询海量数据中的商品名字,每次输入就提示用户各种相关搜索选项,例如淘宝.京东等电商查询 思路 这个功能可以用 ...

  4. jquery 实现邮箱输入自动提示功能

    邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 ...

  5. jquery 实现邮箱输入自动提示功能：（一）

    记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作 ...

  6. jQuery实现的简单文字提示效果模拟title(转)

    来源 http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html 模拟title实现效果,可以修改文字的样式,换行等. 文件下载: ...

  7. jquery ui autocomplete 模拟百度搜索自动提示

    直接上代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=" ...

  8. JQuery模拟实现天猫购物车动画效果

    测试程序源代码下载地址:源码 一.功能描述: 1.点击购买按钮,模拟抛物线将物品弹到购物车里: 2.购物车添加物品后,显示+1动画: 效果图如下: 实现如下: 1.导入jquery相关的包: < ...

  9. 如何在myeclipse中实现jquery的自动提示功能

    在web开发过程中,myeclipse中jsp可以实现自动提示功能,但是jquery代码却无法实现自动提示,需要自己一个个手动去输入,效率过低,怎么办? 工具/原料   jquery 1.8.3.js ...

随机推荐

  1. Ubuntu下压缩包内文件解压后乱码问题的解决

    用到的工具是The Unarchiver项目提供的lsar/unar工具. The Unarchiver项目主页:http://code.google.com/p/theunarchiver/ 安装( ...

  2. FileItem 出现部分中文乱码解决办法

    首先要进行两处的修改: 第一:如果你使用了上传文件的包, 如:ServletFileUpload sfu = new ServletFileUpload(factory); sfu.setHeader ...

  3. nginx-rtmp流媒体服务器搭建【转】

    nginx-rtmp https://github.com/pengqiuyuan/nginx-rtmp nginx-rtmp 流媒体服务器的搭建(采集桌面,手机直播) 在线Demo,直播自己的pc机 ...

  4. 聊聊高并发（二十）解析java.util.concurrent各个组件（二） 12个原子变量相关类

    这篇说说java.util.concurrent.atomic包里的类,总共12个.网上有非常多文章解析这几个类.这里挑些重点说说. watermark/2/text/aHR0cDovL2Jsb2cu ...

  5. Linux 监测网络常用的工具sar iftop netstat ping nping fping mtr

    Linux 监测网络常用的工具sar iftop netstat ping nping fping mtr # sar -n DEV 1 2 # iftop # netstat -i # ping n ...

  6. 金蝶K3，域环境中，无本地用户管理员权限的域用户如何设置注册表权限?

    如果该用户是属于Power Users组:只需要给用户添加注册表中的HKEY_LOCAL_MACHINE的SOFTWARE完全控制的权限.(勾选允许父项的继承权限和传播到该对象和所有子对象) 如果该用 ...

  7. windows 磁盘加密

      windows 磁盘加密 CreateTime--2018年4月25日18:37:45 Author:Marydon 以win10为例 选中磁盘-->你会发现上面的管理BitLocker是置 ...

  8. pdf+iphone+wechat

    可能很多人要问,为啥标题取这个名字. 因为今天在这个上面踩了太多坑.. 我们的需求其实很简单.做一个页面,把pdf文档嵌进去,在线显示. 如此需求,放在PC上chrome浏览器,一个embed标签就搞 ...

  9. [Done]FindBugs: boxing/unboxing to parse a primitive

    在开发过程中遇到了以下问题: FindBugs: boxing/unboxing to parse a primitive 查看代码(左边是老代码,右边是新的): 问题出在 自动装箱和拆箱的检查. 参 ...

  10. 定制ADempiere（1）- 会议记录

    本文是<ADempiere 3.6 Cookbook>一书的实例笔记,详细内容请查阅该书完整内容. 1. 登录pgAdmin III,创建表c_mom: CREATE TABLE adem ...