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

最新推荐文章于 2019-04-07 15:35:20 发布

hbuxzy

最新推荐文章于 2019-04-07 15:35:20 发布

阅读量5.5k

点赞数 1

分类专栏： ajax jquery 文章标签： jquery 百度 div 服务器 javascript ajax

jquery 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

ajax

1 篇文章 0 订阅

订阅专栏

大概要实现的内容

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

    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;  
 }   

hbuxzy

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
仿百度搜索提示框jQuery自动完成

大概要实现的内容这是一个很简单的示例，服务器端只是用了一个jsp页面，返回的类型为xml。先讲下是怎么回事，就是在浏览器端，通过ajax请求，发送一串英文字母，服务器端通过比较，返回具有相同前缀的英文单词。就这么个意思。工程是在IntelliJ IDE中完成的。做前端开发感觉用IntelliJ比较方便，因为对于写javascript的话，有函数名的提示。
复制链接

扫一扫

专栏目录