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--搜索框提示仿百度

猜你喜欢