`

仿Google首页搜索自动补全

    博客分类：
  • AJAX
GoogleCSSjQueryHTML 
阅读更多 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery 自动完成功能(优化版)</title>
        <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
    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() + 3 + "px");
        wordInput.keyup(function(event) {
            //处理文本框中的键盘事件
            //如果输入字母，将文本框中最新信息发送给服务器
            var myEvent = event || window.event;
            var keyCode = myEvent.keyCode;//获得键值
            
            if (keyCode == 27) {
            var wordText = $("#word").val();
                autoHide();
                wordInput.text(wordText);
            }
            else {
                 if (keyCode >= 65 && keyCode <= 90 || keyCode == 8 || keyCode == 46) { //8对应退格键，46对应删除键
                    var wordText = $("#word").val();//获得文本框中的内容
                    var autoNode = $("#auto");
                    if (wordText != "") {
                        clearTimeout(timeoutId);//对上次未完成的延时操作进行取消
                        //延时操作，减少与服务器的交互次数，延时500ms，防止用户操作过快
                        timeoutId = setTimeout(function() {
                            $.post("AutoCompleteServlet", {word:wordText}, function(data) {//发送数据，第二项是属性名对应属性值
                                var jqueryObj = $(data);//将dom对象data转换成jQuery的对象
                                var wordNodes = jqueryObj.find("word");//找到所有word节点
                                autoNode.html("");
                                wordNodes.each(function(i) { //i是索引，用来给id赋值
                                   var wordNode = $(this);//获取单词内容
                                    var newDivNode = $("<div>").attr("id", i).css("backgroundColor", "white");
                                    newDivNode.html(wordNode.text()).appendTo(autoNode);//新建div节点，加入单词内容
                                    //增加鼠标进入事件，高亮节点
                                    newDivNode.mouseover(function() {
                                        //将原来高亮的节点取消高亮
                                        if (highlightindex != -1) {
                                            $("#auto").children("div").eq(highlightindex)
                                                    .css("backgroundColor", "white");
                                        }
                                        //记录新的高亮索引
                                        highlightindex = $(this).attr("id");
                                        $(this).css("backgroundColor", "#3366CC").css("cursor","pointer");
                                    });
                                    //增加鼠标移出事件，取消节点高亮
                                    newDivNode.mouseout(function() {
                                        if (keyCode == 13) {       //判断是否按下回车键
                                            //下拉框有高亮
                                            if (highlightindex != -1) {
                                                lightEventHide();
                                                highlightindex = -1;
                                            } else {
                                                alert("文本框中的[" + $("#word").val() + "]被提交了");
                                                autoHide();
                                                $("#word").get(0).blur();//让文本框失去焦点
                                            }
                                            //取消鼠标移出节点的高亮
                                            //$(this).css("backgroundColor", "white");
                                        }
                                    }
                                    );
                                        //增加鼠标点击事件,可以进行补全
                                        newDivNode.click(function() {
                                            //取出高亮节点的文本内容
                                            var comText = $(this).text();
                                            autoHide();
                                            highlightindex = -1;
                                            //文本框内容变为高亮节点内容
                                            $("#word").val(comText);
                                        });
                                    });
                                    //添加单词内容到弹出框
                                    if (wordNodes.length > 0) {
                                        autoNode.show();
                                    } else {
                                        autoNode.hide();
                                        highlightindex = -1;//弹出框隐藏，高亮节点索引设成-1
                                    }
                                }, "xml");
                            }, 300);
                        }
                    else
                    {
                        autoNode.hide();
                        highlightindex = -1;
                    }
                    } else if (keyCode == 38 || keyCode == 40) {   //判断是否输入的是向上38向下40按键
                        if (keyCode == 38) {
                            var autoNodes = $("#auto").children("div").css("background-color", "white");
                            if (highlightindex != -1) {
                                autoNodes.eq(highlightindex).css("background-color", "white");
                                highlightindex--;
                            } else {
                                lightEvent();
                                highlightindex = autoNodes.length - 1;
                            }
                            if (highlightindex == -1) {
                                highlightindex = autoNodes.length - 1;//如果改变索引值后index变成-1，则将索引值指向最后一个元素
                            }
                             lightEvent();
                             autoNodes.eq(highlightindex).css("backgroundColor", "#3366CC");
                        }
                        if (keyCode == 40) {
                            var autoNodes = $("#auto").children("div");
                            if (highlightindex != -1) {
                                autoNodes.eq(highlightindex).css("background-color", "white");
                            }
                            highlightindex++;
                            if (highlightindex == autoNodes.length) {
                                highlightindex = 0;//如果改变索引值等于最大长度，则将索引值指向第一个元素
                                
                            }
                             lightEvent();
                            autoNodes.eq(highlightindex).css("backgroundColor", "#3366CC");
                        }
                    } else if (keyCode == 13) {       //判断是否按下回车键
                        //下拉框有高亮
                        if (highlightindex != -1) {
                            lightEventHide();
                            highlightindex = -1;
                        } else {
                            alert("文本框中的[" + $("#word").val() + "]被提交了");
                            $("#auto").hide();
                            $("#word").get(0).blur();//让文本框失去焦点
                        }
                        //下拉框没有高亮
                    }
                }
            }
        )
            ;
            $("input[type='button']").click(function() {
                alert("文本框中的[" + $("#word").val() + "]被提交了");
            });
        });
function lightEventHide(){
        var comText = $("#auto").hide().children("div").eq(highlightindex).text();
                      $("#word").val(comText);
}
function lightEvent(){
        var comText = $("#auto").children("div").eq(highlightindex).text();
                      $("#word").val(comText);
}
function autoHide(){
        $("#auto").hide();
}
</script>
        
            <h3>
                <center>施杨 仿google自动补全(jQuery优化版)</center>
            </h3>
            <br />
            <table align="center">
            <tr><td>
            <input type="text" id="word" maxlength=2048 size=55 />
            <br/>
            <td></tr>
            <tr><td align="center">
            <input type="button" value="shiyang 搜索"/>
            </td></tr>
            </table>
            <br />
            <div id="auto"></div>
    </body>
</html>
分享到：
| JSON LIB 日期转换
评论
3 楼 jk138 2011-08-09  
这个是itcast的ajax里的代码，不过还不错，做了优化
2 楼 heyjava 2009-10-22  
明显是转载的..还贴上 原创....你这人太不厚道了...还说啥 诚信做人  狗屁!!
1 楼 lqw8668 2009-03-16  
为什么不贴AutoCompleteServlet的代码？？？？
发表评论

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

相关推荐

    仿GoogleSuggest自动补全的功能

    本教程将详细讲解如何实现一个仿GoogleSuggest的自动补全功能，旨在提供一个绝对实用的解决方案。 首先，理解GoogleSuggest的工作原理至关重要。它基于用户在搜索框中输入的字符，实时从服务器端获取并展示可能的...

    仿谷歌百度实现输入自动补全功能

    总的来说，仿谷歌百度实现输入自动补全功能是一个涉及前端、后端以及算法设计的综合性项目。通过这个项目，你可以深入理解Web交互设计，提升JavaScript编程能力，并掌握如何构建高效的API接口。同时，这也是一个很好...

    一个仿百度、Google、谷歌搜索引擎自动补全

    在本项目中，我们将讨论如何实现一个仿百度、Google、谷歌的搜索引擎自动补全功能。 首先，自动补全的核心在于关键词匹配算法。常见的算法有Trie树（字典树）、Levenshtein距离（编辑距离）和基于TF-IDF的文本...

    改进版 jquery 仿百度谷歌自动补全输入（支持中文）

    标题“改进版 jquery 仿百度谷歌自动补全输入（支持中文）”涉及到的是一个基于jQuery的前端开发技术，旨在实现类似百度和谷歌搜索框的自动补全功能，而且这一版本特别优化了对中文字符的支持。在网页交互设计中，...

    搜索自动补全,仿google

    **搜索自动补全技术详解** 搜索自动补全，也称为智能提示或自动建议，是一种常见的用户体验优化技术，广泛应用于搜索引擎、网站搜索框以及各种应用程序中。它的主要目的是提高用户输入效率，减少用户输入错误，同时...

    AJAX学习总结（九）---Jquery实例：仿googlesuggest自动补全功能

    在本篇博客“AJAX学习总结（九）---Jquery实例：仿googlesuggest自动补全功能”中，作者分享了如何使用jQuery实现一个类似Google Suggest的自动补全功能，这是一种常见的前端交互设计，广泛应用于搜索框输入时提供...

    仿google自动补全

    【仿谷歌自动补全】是一种常见的前端开发技术，主要用于提高用户在输入框中搜索或填写信息时的效率和用户体验。谷歌自动补全功能是通过分析用户的输入，预测并显示可能的搜索词，使得用户可以快速选择合适的选项，而...

    仿google文本框自动补全控件　

    总之，构建一个仿Google的文本框自动补全控件是一项涉及到JavaScript、DOM操作和用户体验设计的任务。通过实践，不仅可以提升你的前端开发技能，还能让你更好地理解如何用技术提升产品的可用性和效率。

    java与jQuery整合ajax仿googleSuggest自动补全实例

    本实例将探讨如何将这两者整合，通过AJAX技术实现一个仿Google Suggest的自动补全功能，该功能通常用于输入框中，为用户提供动态搜索建议。我们将详细解析这个实例中的各个组成部分。 首先，`index.jsp`是用户界面...

    AJAX jquery 模仿谷歌搜索自动补全功能

    在本教程中，我们将深入探讨如何使用AJAX和jQuery实现谷歌搜索式的自动补全功能。自动补全是一种增强用户体验的常见技术，它允许用户在输入查询时获得即时建议，极大地提高了搜索效率。以下是对实现这一功能所需的...

    仿google自动补全 检索建议

    标题中的“仿google自动补全检索建议”是指创建一个类似谷歌搜索框的自动补全功能，它能够在用户输入关键词时，提供与输入内容相关的搜索建议。这个功能在提高用户体验、加快搜索速度方面起到了重要作用。 首先，...

    仿谷歌自动补全js

    编写的一个仿谷歌自动补全的js。而且已改造通用模板，根据onfocus="init('hotKeyword1','1','&lt;%=path %&gt;/google/googlesearch.mvc')"几个关键key在sevice层中控制业务逻辑。

    Jquery实现仿搜索引擎(百度、谷歌)文本框自动补全插件

    在本文中，我们将深入探讨如何使用jQuery来实现一个仿照百度和谷歌搜索引擎的文本框自动补全插件。这个插件的主要目标是提供用户友好的输入体验，通过预测和建议可能的搜索词来提高搜索效率。 ### jQuery简介 ...

    jquery模仿google自动补全案例

    在本文中，我们将深入探讨如何使用jQuery来实现一个模仿Google搜索的自动补全功能。这个功能常见于许多网站，能够极大地提升用户体验，帮助用户快速找到他们想要搜索的关键词。我们将基于给定的"jquery模仿google...

    仿搜索引擎文本框自动补全插件

    此项目“仿搜索引擎文本框自动补全插件”旨在模仿搜索引擎如百度、Google等的自动补全功能，为用户提供快速、准确的搜索建议，提升输入效率。这种功能通常通过JavaScript库，如jQuery，来实现，结合CSS进行样式设计...

    JQuery Ajax 仿google suggest 自动补全功能 支持中文（jsp / Servlet）

    本示例将深入解析如何使用jQuery Ajax实现一个仿Google Suggest的自动补全功能，特别针对中文输入进行了优化，并且结合了Java后端技术如jsp和Servlet。 首先，让我们理解这个功能的核心概念。Google Suggest的自动...

    .net+jquery仿google智能提示

    描述中提到的"jquery.autocomplete.min.js插件 仿google实现自动补全"是指使用jQuery UI库中的Autocomplete组件，这是一个轻量级的插件，用于实现文本输入框的自动补全功能。Google的搜索框就具有这种特性，当用户在...

    javascript仿百度输入框提示自动下拉补全

    在JavaScript编程中，实现类似百度或谷歌搜索框的输入框自动下拉补全功能是一项常见的需求，这可以提升用户体验，使用户在输入时快速找到可能的搜索建议。本实例将介绍如何利用JavaScript来创建这样的功能。 首先，...

    jquery实现的带有分页效果的仿google的自动补齐效果

    本项目是基于jQuery实现的一种带有分页功能的自动补齐效果，模仿了Google搜索的智能提示功能。这个功能对于提高用户体验，尤其是进行大量数据检索时，能够极大地提升输入效率。 首先，我们要理解“自动补齐”...

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