`
jaychang
  • 浏览: 734729 次
  • 性别: Icon_minigender_1
  • 来自: 嘉兴
社区版块
存档分类
最新评论

仿百度搜索提示框jQuery自动完成

阅读更多

大概要实现的内容

      这是一个很简单的示例,服务器端只是用了一个jsp页面,返回的类型为xml。先讲下是怎么回事,就是在浏览器端,通过ajax请求,发送一串英文字母,服务器端通过比较,返回具有相同前缀的英文单词。就这么个意思。

      工程是在IntelliJ IDE中完成的。做前端开发感觉用IntelliJ比较方便,因为对于写javascript的话,有函数名的提示。

      本例提供下载。望各位提出宝贵意见哈。

 

一、客户端JSP页面

 

<%--
  Created by IntelliJ IDEA.
  User: JayChang
  Date: 2010-11-22
  Time: 8:33:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head><title>AutoComplete-Sample</title>
     <link type="text/css" rel="stylesheet" href="./css/default.css">
     <script type="text/javascript" src="./jslib/jquery-1.4.2.js"></script>
     <script type="text/javascript" language="javascript">
         //高亮的索引
         var highLightIndex = -1;
         //超时的标识(对用户连续快速按下键盘的事件做延时处理,只对用户在500ms内最后一次请求,让其生效)
         var timeoutId;
         $(document).ready(function(){
            init();
            $('#auto_txt').bind('keyup',processKeyup);
         });

         /**
          * 处理键盘按下后弹起的事件
          * @param event
          */
         function processKeyup(event){
               var myEvent = event || windows.event;
               var keyCode = myEvent.keyCode;
               //输入是字母,或者退格键则需要重新请求
               if((keyCode >= 65 && keyCode <= 90) || keyCode == 8){
                    //以下两行代码是为了防止用户快速输入导致频繁请求服务器
                    //这样便可以在用户500ms内快速输入的情况下,只请求服务器一次
                    //大大提高服务器性能
                    highLightIndex = -1;
                    clearTimeout(timeoutId);
                    timeoutId = setTimeout(processAjaxRequest,500);
               //处理上下键(up,down)
               }else if(keyCode == 38 || keyCode == 40){
                   processKeyUpAndDown(keyCode);
               //按下了回车键
               }else if(keyCode == 13){
                   processEnter();
               }
          }

         /***
          * 初始化弹出框列表的位置,大小
          */
         function init(){
            $('#auto_div').hide();
            var pos = $('#auto_txt').position();
            var topPosition = pos.top+$('#auto_txt').height()+7;
            var leftPosition = pos.left;
            $('#auto_div').offset({top:topPosition,left:leftPosition});
            $('#auto_div').width($('#auto_txt').width());
            //$('#auto_div').css('position','absolute');
         }

         /**
          * 处理Ajax请求
          * @param data
          */
         function processAjaxRequest(){
             $.ajax({
                 type:"post",       //http请求方法,默认:"post"
                 url:"data.jsp",   //发送请求的地址
                 data:"reqWord="+$('#auto_txt').val(),
                 dataType:"xml",   //预期服务器返回的数据类型
                 success:processAjaxResponse
              });
         }

         /**
          * 处理Ajax回复
          * @param data Ajax请求得到的返回结果为dom文档对象
          */
         function processAjaxResponse(data){
             $('#auto_div').html('').show();
             var xml = $(data);
             var words = xml.find('word');
             for(var i = 0 ; i < words.length ; i ++){
                var word_div = $('<div></div>');
                word_div.html(words.eq(i).text());
                word_div.hover(fnOver,fnOut);
                word_div.click(getAutoText);
                $('#auto_div').append(word_div);
             }
         }

         /**
          * 处理鼠标滑过
          */
         function fnOver(){
             //alert($(this));
              changeToWhite();
              $(this).css('background-color','pink');
              //alert($(this).index());
              highLightIndex = $(this).index();
              //下面一行注释掉了,百度搜索也没这功能,就是鼠标移动时,跟着改变搜索框的内容
              //$('#auto_txt').val($('#auto_div').children().eq(highLightIndex).html());
         }
         
         /**
          * 处理鼠标移除
          */
         function fnOut(){
             $(this).css('background-color','white');
         }

         /**
          * 得到自动填充文本
          */
         function getAutoText(){
            //有高亮显示的则选中当前选中当前高亮的文本
            if(highLightIndex != -1){
                $('#auto_txt').val($(this).html());
                $('#auto_div').html('').hide();
            }
         }

         /**
          * 处理按下Enter键
          * @param keyCode
          */
         function processEnter(){
             if(highLightIndex != -1){
                $('auto_txt').val($('#auto_div').children().eq(highLightIndex).html());
                $('#auto_div').html('').hide();
             }
         }

         /**
          * 处理按上下键的情况
          */
         function processKeyUpAndDown(keyCode){
             var words = $('#auto_div').children();
             var num = words.length;
             if(num <= 0) return;
             changeToWhite();
             highLightIndex = ((keyCode != 38 ? num + 1:num - 1)+highLightIndex) % num;
             words.eq(highLightIndex).css('background-color','pink');
             $('#auto_txt').val(words.eq(highLightIndex).html());
         }

         /**
          * 如果有高亮的则把高亮变白
          */
         function changeToWhite(){
             if(highLightIndex != -1){
                 $('#auto_div').children().eq(highLightIndex).css('background-color','white');
             }
         }
     </script>
  </head>
  <body>
    自动完成示例 <input type="text" id="auto_txt"><input type="button" value="提交">
                 <div style="border-width:1px;" id="auto_div"></div>
  </body>
</html>

 二、作为服务器端的JSP,返回的是XML

       这里稍作解释,为了方便起见,在服务器端只是很简单的处理,返回有相同前缀的英文单词。没有对空格等复杂的搜索条件作处理,本例主要还是侧重于浏览器端的JavaScript。

 

<%--
  Created by IntelliJ IDEA.
  User: JayChang
  Date: 2010-11-22
  Time: 8:33:22
  To change this template use File | Settings | File Templates.
--%>
<%@page contentType="text/xml; charset=UTF-8"%>
<%
    String reqWord = request.getParameter("reqWord");
    System.out.println(reqWord);
%>
<words>
    <%if("absolute".startsWith(reqWord)){%>
        <word>absolute</word>
    <%}%>
    <%if("air".startsWith(reqWord)){%>
        <word>air</word>
    <%}%>
    <%if("apple".startsWith(reqWord)){%>
        <word>apple</word>
     <%}%>
    <%if("amaze".startsWith(reqWord)){%>
        <word>amaze</word>
     <%}%>
    <%if("bat".startsWith(reqWord)){%>
        <word>bat</word>
     <%}%>
    <%if("bicycle".startsWith(reqWord)){%>
        <word>bicycle</word>
     <%}%>
    <%if("bite".startsWith(reqWord)){%>
        <word>bite</word>
     <%}%>
    <%if("bottle".startsWith(reqWord)){%>
        <word>bottle</word>
     <%}%>
    <%if("cat".startsWith(reqWord)){%>
        <word>cat</word>
     <%}%>
    <%if("carry".startsWith(reqWord)){%>
        <word>carry</word>
     <%}%>
     <%if("castle".startsWith(reqWord)){%>
        <word>castle</word>
     <%}%>
</words>

   三、CSS样式

 

 #auto_div{
     position:absolute;
     border-width:1px;
     border:1px #808080 solid;
 } 
 

 

 

分享到:
评论
2 楼 jaychang 2014-03-25  
zjqwll 写道
不知道为啥,输入后任何反应都没有,QQ85583755

需要用一个JSP容器,把那个JSP文件放在TOMCAT中
1 楼 zjqwll 2014-03-14  
不知道为啥,输入后任何反应都没有,QQ85583755

相关推荐

    仿百度搜索的jquery自动完成功能包

    总的来说,"仿百度搜索的jQuery自动完成功能包"是一个实用的工具,它可以帮助开发者快速实现搜索框的智能提示功能,提升用户的搜索体验。通过理解jQuery的基本概念、自动完成的实现原理以及提供的资源,开发者可以...

    jQuery 仿百度搜索功能

    **jQuery 仿百度搜索功能详解** 在Web开发中,用户友好的交互体验是提升网站质量的关键因素之一。其中,搜索引擎的快速智能提示功能是提高用户体验的重要手段,这正是"jQuery 仿百度搜索功能"所要实现的目标。这个...

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

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

    php+jquery仿百度搜索提示框autoComplete

    "php+jquery仿百度搜索提示框autoComplete"是一个示例项目,它利用PHP和jQuery技术实现了类似百度搜索引擎的自动补全功能。这个功能允许用户在输入关键词时,系统会实时地根据已有的数据提供匹配的建议,从而加速...

    用php+ajax写的仿百度谷歌搜索下拉自动提示框效果

    这个项目“用php+ajax写的仿百度谷歌搜索下拉自动提示框效果”旨在实现类似百度和谷歌搜索引擎的实时搜索建议功能。下面我们将详细探讨这个过程涉及的关键知识点。 首先,我们要理解**PHP**(Hypertext ...

    jQuery百度搜索提示框效果代码.zip

    总结来说,这个压缩包提供了一个使用jQuery实现的百度搜索提示框效果,通过`jquery.bigautocomplete.js`插件实现了高效的自动完成功能,配合`jquery-1.7.2.min.js`库进行DOM操作和事件处理。代码的详细注释使得...

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

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

    仿百度自动搜索控件,自动搜索

    【标题】"仿百度自动搜索控件,自动搜索"是一个基于jQuery和jQuery.autocomplete插件的Web应用程序,它旨在实现类似百度搜索引擎的自动提示功能。这个控件可以在用户输入关键词时,实时显示与输入匹配的搜索建议,...

    jquery Autocomplete 仿百度搜索 只能搜索提示

    总结来说,"jQuery Autocomplete 仿百度搜索 只能搜索提示"是一个基于jQuery UI和ASP.NET的实时搜索提示系统,它通过前后端的配合,实现了类似百度和Google搜索的自动补全功能。这个项目不仅提供了代码实现,还包含...

    jQuery仿百度搜索下拉框自动补全代码插件.zip

    《jQuery仿百度搜索下拉框自动补全代码插件详解》 在网页开发中,用户交互体验至关重要,其中搜索功能的便捷性和智能性是衡量一个网站用户体验的重要指标。jQuery作为一个强大的JavaScript库,提供了丰富的功能来...

    ajax仿百度搜索输入自动提示

    Ajax 仿百度搜索自动提示功能是一种常见的前端交互设计,它极大地提升了用户的搜索体验。在网页中,用户在搜索框输入关键字时,系统能够实时地根据输入内容动态显示相关的搜索建议,这种功能在很多网站,尤其是搜索...

    Jquery仿百度自动提示

    **jQuery仿百度自动提示**是一种常见的前端开发技术,主要用于实现搜索框或输入框中的自动补全功能,提高用户输入效率和用户体验。这个技术基于JavaScript库jQuery,通过监听用户输入,实时从服务器或本地数据中匹配...

    ajax+jquery实现类似百度搜索提示框

    **Ajax + jQuery 实现类似百度搜索提示框** Ajax(Asynchronous JavaScript and XML)与jQuery库的结合使用,是现代Web开发中实现动态交互的重要技术。本篇将详细讲解如何利用这两种技术来创建一个类似百度搜索框的...

    jQuery仿百度搜索框下拉代码.zip

    《jQuery仿百度搜索框下拉代码详解》 在网页设计中,用户交互体验的重要性不言而喻,其中搜索框的设计尤为关键。一个优秀的搜索框不仅要有简洁明了的界面,还需要具备良好的用户体验,如自动补全、下拉提示等功能。...

    jQuery百度搜索提示框效果JS代码

    《jQuery实现百度搜索提示框效果JS代码解析》 在网页开发中,为了提供更好的用户体验,搜索框往往需要配备智能提示功能,就像百度搜索那样。这种功能可以快速引导用户找到他们可能感兴趣的内容,节省输入时间。本文...

    类百度,去哪儿 输入jquery自动完成

    标题中的“类百度,去哪儿 输入jquery自动完成”指的是在网页开发中实现的一种用户输入提示功能,这个功能在用户在输入框中输入文字时,系统能够根据已输入的部分内容,自动显示出一个下拉列表,列表中包含与输入...

    漂亮的仿百度百度搜索提示

    在IT行业中,创建一个"漂亮的仿百度百度搜索提示"是一个常见的需求,这涉及到前端开发、用户体验设计以及数据处理等多个方面。下面将详细讲解这个主题所涵盖的知识点。 首先,前端开发是实现这一功能的核心环节。这...

    jQuery搜索框自动提示代码.zip

    在本文中,我们将深入探讨如何使用jQuery来实现一个搜索框自动提示功能,这通常被称为自动完成或自动填充。我们将基于给定的标题“jQuery搜索框自动提示代码.zip”和描述来构建这个主题。 首先,jQuery是一个流行的...

    Jquery+asp.net实现的自动完成功能

    "Jquery+asp.net实现的自动完成功能"这个项目是这样的一个示例,它模仿了百度的搜索提示功能,允许用户输入时提供即时的搜索建议。这个功能通过AJAX技术实现了前端与后端的异步通信,提高了用户体验,减少了不必要的...

    仿Baidu的搜索下拉提示框源码(ASP.NET)

    【标题】"仿Baidu的搜索下拉提示框源码(ASP.NET)" 是一个基于ASP.NET平台开发的项目,旨在实现与百度搜索类似的下拉提示框功能。在网页的搜索框中输入关键字时,该功能会自动显示与输入相关的搜索建议,提升用户的...

Global site tag (gtag.js) - Google Analytics