`

js--搜索框提示仿百度

阅读更多
大概要实现的内容

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

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

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



一、客户端JSP页面


Html代码  收藏代码

    <%-- 
      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 =={ 
                        //以下两行代码是为了防止用户快速输入导致频繁请求服务器 
                        //这样便可以在用户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。


Html代码  收藏代码

    <%-- 
      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样式


Html代码  收藏代码

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


【by:http://jaychang.iteye.com/blog/823893】

分享到:
评论

相关推荐

    仿百度搜索框的联想词提示效果js代码.zip

    &lt;!... &lt;... &lt;head&gt; ...meta charset="utf-8" /&gt;...仿百度搜索框的联想词提示效果js代码&lt;... 这是一款纯javaScript实现的仿百度搜索框联想词提示代码,搜索框输入文字自动提示相关联想词js特效。

    模仿百度搜索框提示效果(源码)

    【标题】:“模仿百度搜索框提示效果(源码)”是指一种实现类似百度搜索引擎在用户输入关键词时,自动下拉显示相关搜索建议的技术。这种功能极大地提升了用户体验,减少了用户输入的负担,使得搜索过程更加便捷。 ...

    仿百度搜索框源码

    【仿百度搜索框源码】是一个编程项目,旨在实现类似百度搜索框的功能,提供用户友好的搜索体验。在网页设计和开发中,这样的搜索框是关键的交互元素,它不仅需要具备基本的输入验证和搜索功能,还可能涉及到高级特性...

    仿百度搜索提示框

    【标题】"仿百度搜索提示框"涉及到的技术和知识点主要包括前端界面设计、后端服务器处理、数据库交互以及异步数据加载。以下是对这些关键领域的详细解释: 1. 前端界面设计: 这部分主要是创建一个与百度搜索框...

    百度搜索框html代码

    在这个实例中,可能会有一个`&lt;title&gt;`标签来设置页面标题为"百度搜索框",以及引用外部CSS和JS文件的`&lt;link&gt;`和`&lt;script&gt;`标签。 2. `&lt;body&gt;`标签:包含网页的实际内容。搜索框通常由`&lt;form&gt;`标签定义,其中包含一...

    模仿百度搜索框

    【标题】:“模仿百度搜索框”这一项目旨在创建一个与百度搜索框...通过以上步骤,我们可以构建一个功能完备且视觉效果良好的“仿百度搜索框”。实际开发中,可能还需要考虑SEO优化、错误处理、用户反馈等更多细节。

    模拟百度搜索框提示效果

    模拟实现百度搜索框提示效果,自己用js动态创建、移除div来实现的,很简单 注释详细。

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

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

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

    在"jQuery仿百度搜索框下拉代码"中,`jiaoben6813`很可能是包含实现此功能的JavaScript代码的文件,可能是一个`.js`文件。这个文件中可能会定义一个函数或者类来处理搜索框的事件,并动态地生成和显示下拉列表。它...

    js百度搜索框提示,不包含数据库

    在JavaScript(JS)中实现一个百度搜索框提示功能,是一种常见的前端交互设计,它能够为用户提供实时的搜索建议,提高用户体验。在这个实例中,我们将不依赖数据库,而是使用静态数据或者本地存储来实现搜索提示。这...

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

    同时,我们还需要编写一段JavaScript代码来处理服务器返回的结果,将这些结果显示在搜索框下方的提示列表中。 对于搜索自动提示,通常涉及到的前端技术还包括DOM操作,如使用JavaScript或jQuery来动态创建和更新...

    JS百度搜索框联想词提示代码.zip

    【JS百度搜索框联想词提示代码】是一种使用JavaScript编写的前端技术实现,它主要用于创建一个类似于百度搜索引擎的自动联想提示功能。在用户输入关键词时,该代码能够实时地从预设的数据源中匹配并显示相关的搜索...

    百度搜索框源代码程序源码

    本资源"百度搜索框源代码程序源码"提供了一个实现百度搜索框功能的源代码,这对于我们理解搜索引擎前端界面的工作原理、学习网页交互设计以及前端开发技术具有重要的学习价值。 首先,我们要明白的是,这个源代码...

    百度搜索框推荐提示功能代码.zip

    在IT行业中,搜索框的推荐提示功能是一种常见的用户体验优化手段,尤其在大型搜索引擎如百度中,这一功能尤为重要。"百度搜索框推荐提示功能代码.zip"是一个包含实现这一功能的源码压缩包,主要针对的是HTML网页代码...

    百度搜索框制作.zip

    在这个项目中,搜索框可能采用了百度的风格,以保持品牌一致性,同时考虑了公司员工的操作习惯,可能具有特定的输入提示、自动补全等功能。前端开发可能使用HTML、CSS和JavaScript等技术,其中JavaScript或其库如...

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

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

    Servlet+Ajax实现简易的仿百度搜索框智能提示

    这里我们关注的是"Servlet+Ajax实现简易的仿百度搜索框智能提示"这一主题。这个技术组合主要用于创建动态、交互性强的用户体验,尤其是对于搜索功能,它能够实时为用户提供可能的搜索建议,就像百度搜索框那样。以下...

Global site tag (gtag.js) - Google Analytics