`
yanlp
  • 浏览: 76863 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

使用jQuery模拟Google的自动提示效果

GooglejQueryCSSSQLServlet 
阅读更多

注意:

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、最后的效果：

分享到：
| SVN服务器端配置
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    模拟google自动提示

    总的来说，模拟Google自动提示是通过jQuery Autocomplete插件实现的，它提高了用户在网站上的交互体验，通过实时的搜索建议减少了用户输入的时间和错误。开发者可以通过学习这个插件的使用方法，结合示例代码，轻松...

    .net+jquery仿google智能提示

    通过以上组件和文件的协同工作，开发者可以创建一个高效、响应式的智能提示系统，模拟Google搜索框的体验。这个系统不仅可以用于搜索框，还可以应用在任何需要根据用户输入提供动态建议的场景中。

    jQuery实现自动补全功能

    在提供的压缩包文件"GoogleSuggest"中，可能包含了一个关于谷歌搜索建议的示例，它展示了如何使用jQuery UI Autocomplete来模拟谷歌搜索的自动补全效果。通过分析和学习这个示例，你可以更深入地理解如何与服务器...

    jquery 模拟类搜索框自动完成搜索提示功能(改进)

    在本示例中，我们探讨的是如何使用jQuery实现一个类似于Google搜索框的自动完成功能，即用户在输入框中输入文字时，系统会根据输入自动显示相关建议。这个功能通过`autopoint.js`脚本实现，它依赖于jQuery库。 首先...

    基于jquery的仿百度搜索框效果代码

    总结来说，通过使用jQuery，我们可以轻松实现一个仿百度搜索框的效果，包括自动提示功能和简洁的样式设计。这只是一个基础示例，实际应用中可能需要连接到服务器获取实时的搜索建议，并对样式进行更多自定义以满足...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    9.jquery仿google首页图标动画菜单效果实现模拟鼠标动画菜单的代码 10.jquery仿卓越亚马逊网鼠标移到按钮弹出菜单的效果代码 11.jquery浮动变化的个性菜单插件floatmenu下载 12.jQuery黑色风格仿Flash版下滑...

    超实用的jQuery代码段

    《超实用的jQuery代码段》的代码跨平台、跨设备、跨浏览器，充分向读者演示了如何使用jQuery的各项技术，实现令人激动的网页效果。 　 《超实用的jQuery代码段》从jQuery框架的使用原理与应用场景出发，对最实用的...

    jquery的几个例子程序

    这个例子展示了jQuery的动画效果，特别是元素的淡入淡出功能。`fadeIn()`和`fadeOut()`方法用于控制元素的透明度，使得它们可以平滑地出现和消失。这对于创建吸引人的用户界面非常有用，比如页面加载时的内容显示或...

    jQuery经典效果收藏（自己收藏的）

    通过jQuery，我们可以监听用户的操作，然后模拟气泡从底部上升的效果，这需要用到animate()函数配合CSS的position属性，以及定时器来控制气泡的动态变化。 对于24款实用的翻页页码CSS代码，jQuery可以帮助我们实现...

    Jquery模仿Baidu、Google搜索时自动补充搜索结果提示

    这篇关于“Jquery模仿Baidu、Google搜索时自动补充搜索结果提示”的技术分享，主要阐述了如何使用Jquery实现类似百度、谷歌搜索引擎中常见的自动提示功能。 首先，关键词“Jquery”是目前前端开发中广泛使用的...

    jquery特效

    自2006年发布以来，jQuery迅速成为Web开发领域中最广泛使用的库之一，因其简洁、直观的API而备受青睐。在"jquery特效"这个主题中，我们将探讨50个经典的jQuery特效代码，这些特效代码涵盖了各种网页交互和视觉效果，...

    仿google输入提示

    【标签】"仿google输入提示"这个标签直接指向了我们要讨论的核心技术，即模拟Google搜索框的自动补全行为。这涉及到关键词匹配算法、数据结构优化（如使用Trie树或哈希表）、实时响应用户输入以及与后端数据交互等多...

    ajax 仿google下垃菜单提示框

    2. **CSS样式**：为了模拟Google的提示框外观，我们需要编写CSS样式，定义提示框的布局、颜色、字体等。这包括隐藏和显示提示框的逻辑，以及在输入框下方定位提示框。 3. **JavaScript事件监听**：我们需要在输入框...

    完全仿谷歌搜索 显示信息条数

    总结来说，"完全仿谷歌搜索 显示信息条数"涵盖了智能提示、自动回传、Google搜索效果的模拟，以及AJAX技术的运用。这个项目需要开发者具备跨领域的技术能力，包括前端的交互设计、JavaScript编程，以及后端的搜索...

    struts2 json ajax示例 google提示

    客户端的回调函数再将这些建议显示出来，模拟Google搜索提示的效果。 通过这样的方式，我们可以利用Struts2的JSON插件和AJAX技术轻松地构建出具有实时搜索建议功能的Web应用。在实际项目中，可能还需要考虑错误处理...

    Ajax 模仿google百度提示输入框 v1.8

    Ajax模仿google提示输入框 使用说明 v1.8 本程序由飞飞asp乐园编写 ************************************************* 特别感谢： 一杯白开水 网友 的帮助 版本所提的修改建议 *********************************...

    50款非常棒的 jQuery 插件分享

    25. JQuery Google Charting：利用Google Charts API创建各种图表。 26. Visual JQuery Lightbox：直观的图片和媒体查看器，具有多种主题和过渡效果。 27. 3D Cloud Carousel：3D云朵样式的轮播图，创新的展示方式。...

    Ajax模仿google提示输入框 v1.8

    16.当输入框失去焦点时，提示框会自动隐藏 ######V1.8解决问题############ 17.解决了鼠标无法选择的问题 ****************************************************************** 文件使用说明： 在需要使用的页面...

    动态查找类似谷歌搜索引擎

    在描述中提到的功能，即“当找到类似的输入时会自动弹出相关的下拉列表”，这通常被称为自动补全或智能提示，是一种常见的用户体验优化手段。这种功能广泛应用于搜索引擎和输入框中，能帮助用户快速找到他们可能要...

Magicbox
Global site tag (gtag.js) - Google Analytics