`

js--搜索框提示仿百度

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

      这是一个很简单的示例，服务器端只是用了一个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】

分享到：
| Ajax 创建请求
评论
发表评论

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

相关推荐

    仿百度搜索框的联想词提示效果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实现简易的仿百度搜索框智能提示"这一主题。这个技术组合主要用于创建动态、交互性强的用户体验，尤其是对于搜索功能，它能够实时为用户提供可能的搜索建议，就像百度搜索框那样。以下...

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