仿Google自动补全 jQuery 不含索引处理

http://javazeke.javaeye.com/blog/512390
关键字: 仿google自动补全

自动补全

1． 页面有一个文本框，一个自动提示层，一个按

 
Xml代码

   1. <script type="text/javascript" src="../js/jquery-1.3.2.js"></script> 
   2. <script type="text/javascript" src="../js/autoComplete.js"></script> 
   3.  
   4. <div style="text-align: left; width: 500px;"> 
   5. <input type="text" id="key" style="width: 400px;height:25px;" /> 
   6. <input type="button" id="commit" style="background-color:#1874CD;width:70px;height:25px;border:0px;color:#ffffff;" value=" 提 交 "/> 
   7. <div id="autoKey"></div> 
   8. </div> 

<script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="../js/autoComplete.js"></script>

<div style="text-align: left; width: 500px;">
<input type="text" id="key" style="width: 400px;height:25px;" />
<input type="button" id="commit" style="background-color:#1874CD;width:70px;height:25px;border:0px;color:#ffffff;" value=" 提 交 "/>
<div id="autoKey"></div>
</div>

 

自动提示JavaScript…

Js代码

   1. //页面加载好，autoKey应该隐藏 
   2.  
   3. $(document).ready(function(){ 
   4.  
   5.     //定义高亮变量，控制上下键的选择 
   6.     //-1代表不高亮任何行 
   7.     var highlightindex = -1; 
   8.     //提示层的子层数组 
   9.     var completesVal; 
  10.     //将要显示的提示 
  11.     var keys; 
  12.     //时间延迟对象 
  13.     var timeDelay; 
  14.  
  15.     //获得输入input的对象 
  16.     var keyInput=$("#key"); 
  17.     var keyInputOffset=keyInput.offset(); 
  18.     var autoDiv=$("#autoKey"); 
  19.     //提示层的样式 
  20.     autoDiv.hide().css("border","1px solid #999999").css("position","absolute") 
  21.             .css("top",keyInputOffset.top + keyInput.height() + 8 + "px") 
  22.             .css("left",keyInputOffset.left + "px").width(keyInput.width() + 6) 
  23.             .css("color","#aaaaaa").css("z-index","10").css("background-color","#FFFFFF"); 
  24.  
  25.  
  26.      
  27.     //按键按下后与服务器的交互 
  28.     keyInput.keyup(function(event){ 
  29.          
  30.         //获取键盘事件对象 
  31.         var keyEvent=event || window.event; 
  32.  
  33.         //判断键盘输入的值得范围 
  34.         //1.输入的是正常的字母 
  35.         //2.向上向下键 
  36.         //3。回车键 
  37.         var keyCode=keyEvent.keyCode; 
  38.  
  39.         if(keyCode !=38 && keyCode !=40 && keyCode != 13){ 
  40.             //获取当前文本框中的值 
  41.             var currentVal=keyInput.val(); 
  42.             //如果当前的文本框内容为空，就不在向服务器发送请求 
  43.             if(currentVal != ""){ 
  44.                 //取消上次提交 
  45.                 window.clearTimeout(timeDelay); 
  46.                 //延迟500ms提交,防止频繁提交 
  47.                 timeDelay=window.setTimeout(function(){ 
  48.                     $.post("../ParseParam",{paramInfo:currentVal},function(data){ 
  49.  
  50.                      //清空autoDiv的内容并且隐藏 
  51.                         autoDiv.html(""); 
  52.                      
  53.                     //对回传的数据抽取，组成一个key的数组 
  54.                     keys=$(data).find("key"); 
  55.  
  56.                     keys.each(function(){ 
  57.  
  58.                         var keyval=$(this).text(); 
  59.                          
  60.                         if(keyval !=null){ 
  61.                             $("<div>").css("font-size","13px").css("height","18px").css("padding-top","1px").html(keyval).appendTo(autoDiv); 
  62.                         } 
  63.                     }); 
  64.                     if(keys.length>0){ 
  65.                         //为提示加上鼠标的选择功能 
  66.                         //鼠标over||out会触发事件，并高亮 
  67.                         //单击高亮层关闭提示层，并且把值传给文本框 
  68.  
  69.                         completesVal=autoDiv.children("div"); 
  70.  
  71.                         //鼠标一移到autoKey上面，上下键的选择就取消 
  72.                         autoDiv.mouseover(function(){ 
  73.                             //highlightindex不等于-1说明先前用上下键移动过 
  74.                             if(highlightindex != -1){ 
  75.                                 //定位到那个节点，取消其高亮 
  76.                                 completesVal.eq(highlightindex).css("background-color","white").css("color","#aaaaaa"); 
  77.                                 //highlightindex = -1; 
  78.                                 highlightindex = -1; 
  79.                             } 
  80.                         }); 
  81.  
  82.                         completesVal.each(function(){ 
  83.                             var t=$(this); 
  84.                             t.css("cursor","pointer").mouseover(function(){ 
  85.                                 //加上mouseover事件 
  86.                                 t.css("background-color","#7EC0EE").css("color","#000000"); 
  87.                             }).mouseout(function(){ 
  88.                                 //mouseout事件 
  89.                                 t.css("background-color","white").css("color","#aaaaaa"); 
  90.                             }).click(function(){ 
  91.                                 //单击事件 
  92.                                 keyInput.val(t.text()); 
  93.                                 autoDiv.hide(); 
  94.                             }); 
  95.                         }); 
  96.  
  97.                         highlightindex = -1; 
  98.                         autoDiv.show(); 
  99.                     }else{ 
 100.                         highlightindex = -1; 
 101.                         autoDiv.hide(); 
 102.                     } 
 103.                 },"xml"); 
 104.                 },500); 
 105.  
 106.             } 
 107.          
 108.         }else if(keyCode == 38 || keyCode ==40 || keyCode == 13){ 
 109.             //第一步先获得提示框里所有补全信息的数组 
 110.             // var completesVal=$("#autoKey").children("div");考虑到效率，把这步放到全局 
 111.             //向下键的控制 
 112.             if(keyCode == 40){ 
 113.                 //如果现在的高亮是存在的，那么我们就要移动highlightindex 
 114.                 if(highlightindex != -1){ 
 115.                     //去掉当前高亮 
 116.                     completesVal.eq(highlightindex).css("background-color","white").css("color","#aaaaaa"); 
 117.                 } 
 118.                 //移动高亮的指针, 
 119.                 //注意这里的highlightindex++一定要放在if的外面， 
 120.                 // 放在里面如果hightlightindex=-1，则永远也移动不了 
 121.                 highlightindex++; 
 122.                 //判断是否到了最后一个元素 
 123.                 if(highlightindex == completesVal.length){ 
 124.                     highlightindex = 0; 
 125.                 } 
 126.                 //高亮当前highlightindex节点 
 127.                 completesVal.eq(highlightindex).css("background-color","#7EC0EE").css("color","#000000"); 
 128.             } 
 129.             //向上键的控制 
 130.             if(keyCode == 38){ 
 131.                 if(highlightindex != -1){ 
 132.                     completesVal.eq(highlightindex).css("background-color","white").css("color","#aaaaaa"); 
 133.                     highlightindex--; 
 134.                 } 
 135.                 if(highlightindex ==-1){ 
 136.                     highlightindex=completesVal.length; 
 137.                 } 
 138.                  //高亮当前highlightindex节点 
 139.                 completesVal.eq(highlightindex).css("background-color","#7EC0EE").css("color","#000000"); 
 140.             } 
 141.  
 142.             //enter键的控制 
 143.             //1.按下enter键，把提示的值传给文本框 
 144.             //2.关闭提示层 
 145.             //3.提交 
 146.             if(keyCode == 13){ 
 147.                  
 148.                 if(highlightindex != -1){ 
 149.                     //获取当前高亮值 
 150.                     var comsVal = completesVal.eq(highlightindex).text(); 
 151.                     
 152.                     //给文本框赋值 
 153.                     keyInput.val(comsVal); 
 154.                     //高亮索引回归到初始化 
 155.                     highlightindex = -1; 
 156.                     //隐藏提示框 
 157.                     autoDiv.hide(); 
 158.                 }else{ 
 159.                      
 160.                     commitSearch(); 
 161.  
 162.                     //文本框失去焦点，不然按回车会不停的发出请求 
 163.                     keyInput.get(0).blur(); 
 164.                     autoDiv.hide(); 
 165.                 } 
 166.             } 
 167.  
 168.         } 
 169.     }); 
 170.  
 171.  
 172.     //提交按钮的事件 
 173.     var commitBtn=$("#commit"); 
 174.     //commitBtn的click事件 
 175.     commitBtn.click(commitSearch); 
 176.  
 177.     //提交函数  
 178.     function commitSearch(){ 
 179.  
 180.         var cv=keyInput.val(); 
 181.  
 182.         //cv=encodeURIComponent(cv); 
 183.  
 184.         window.location.href="../SearchIndex?paramInfo="+cv; 
 185.        // $.get("../SearchIndex",{paramInfo:cv}); 
 186.          
 187.     } 
 188.     //keyInput失去焦点后关闭提示层 
 189.     //keyInput.blur(function(){ 
 190.         //autoDiv.hide(); 
 191.         //highlightindex = -1; 
 192.    // }); 
 193. }); 

//页面加载好，autoKey应该隐藏

$(document).ready(function(){

    //定义高亮变量，控制上下键的选择
    //-1代表不高亮任何行
    var highlightindex = -1;
    //提示层的子层数组
    var completesVal;
    //将要显示的提示
    var keys;
    //时间延迟对象
    var timeDelay;

    //获得输入input的对象
    var keyInput=$("#key");
    var keyInputOffset=keyInput.offset();
    var autoDiv=$("#autoKey");
    //提示层的样式
    autoDiv.hide().css("border","1px solid #999999").css("position","absolute")
            .css("top",keyInputOffset.top + keyInput.height() + 8 + "px")
            .css("left",keyInputOffset.left + "px").width(keyInput.width() + 6)
            .css("color","#aaaaaa").css("z-index","10").css("background-color","#FFFFFF");


   
    //按键按下后与服务器的交互
    keyInput.keyup(function(event){
       
        //获取键盘事件对象
        var keyEvent=event || window.event;

        //判断键盘输入的值得范围
        //1.输入的是正常的字母
        //2.向上向下键
        //3。回车键
        var keyCode=keyEvent.keyCode;

        if(keyCode !=38 && keyCode !=40 && keyCode != 13){
            //获取当前文本框中的值
            var currentVal=keyInput.val();
            //如果当前的文本框内容为空，就不在向服务器发送请求
            if(currentVal != ""){
                //取消上次提交
                window.clearTimeout(timeDelay);
                //延迟500ms提交,防止频繁提交
                timeDelay=window.setTimeout(function(){
                    $.post("../ParseParam",{paramInfo:currentVal},function(data){

                     //清空autoDiv的内容并且隐藏
                        autoDiv.html("");
                   
                    //对回传的数据抽取，组成一个key的数组
                    keys=$(data).find("key");

                    keys.each(function(){

                        var keyval=$(this).text();
                       
                        if(keyval !=null){
                                $("<div>").css("font-size","13px").css("height","18px").css("padding-top","1px").html(keyval).appendTo(autoDiv);
                        }
                    });
                    if(keys.length>0){
                        //为提示加上鼠标的选择功能
                        //鼠标over||out会触发事件，并高亮
                        //单击高亮层关闭提示层，并且把值传给文本框

                        completesVal=autoDiv.children("div");

                        //鼠标一移到autoKey上面，上下键的选择就取消
                        autoDiv.mouseover(function(){
                            //highlightindex不等于-1说明先前用上下键移动过
                            if(highlightindex != -1){
                                //定位到那个节点，取消其高亮
                                completesVal.eq(highlightindex).css("background-color","white").css("color","#aaaaaa");
                                //highlightindex = -1;
                                highlightindex = -1;
                            }
                        });

                        completesVal.each(function(){
                            var t=$(this);
                            t.css("cursor","pointer").mouseover(function(){
                                //加上mouseover事件
                                t.css("background-color","#7EC0EE").css("color","#000000");
                            }).mouseout(function(){
                                //mouseout事件
                                t.css("background-color","white").css("color","#aaaaaa");
                            }).click(function(){
                                //单击事件
                                keyInput.val(t.text());
                                autoDiv.hide();
                            });
                        });

                        highlightindex = -1;
                        autoDiv.show();
                    }else{
                        highlightindex = -1;
                        autoDiv.hide();
                    }
                },"xml");
                },500);

            }
       
        }else if(keyCode == 38 || keyCode ==40 || keyCode == 13){
            //第一步先获得提示框里所有补全信息的数组
            // var completesVal=$("#autoKey").children("div");考虑到效率，把这步放到全局
            //向下键的控制
            if(keyCode == 40){
                //如果现在的高亮是存在的，那么我们就要移动highlightindex
                if(highlightindex != -1){
                    //去掉当前高亮
                    completesVal.eq(highlightindex).css("background-color","white").css("color","#aaaaaa");
                }
                //移动高亮的指针,
                //注意这里的highlightindex++一定要放在if的外面，
                // 放在里面如果hightlightindex=-1，则永远也移动不了
                highlightindex++;
                //判断是否到了最后一个元素
                if(highlightindex == completesVal.length){
                    highlightindex = 0;
                }
                //高亮当前highlightindex节点
                completesVal.eq(highlightindex).css("background-color","#7EC0EE").css("color","#000000");
            }
            //向上键的控制
            if(keyCode == 38){
                if(highlightindex != -1){
                    completesVal.eq(highlightindex).css("background-color","white").css("color","#aaaaaa");
                    highlightindex--;
                }
                if(highlightindex ==-1){
                    highlightindex=completesVal.length;
                }
                 //高亮当前highlightindex节点
                completesVal.eq(highlightindex).css("background-color","#7EC0EE").css("color","#000000");
            }

            //enter键的控制
            //1.按下enter键，把提示的值传给文本框
            //2.关闭提示层
            //3.提交
            if(keyCode == 13){
               
                if(highlightindex != -1){
                    //获取当前高亮值
                    var comsVal = completesVal.eq(highlightindex).text();
                  
                    //给文本框赋值
                    keyInput.val(comsVal);
                    //高亮索引回归到初始化
                    highlightindex = -1;
                    //隐藏提示框
                    autoDiv.hide();
                }else{
                   
                    commitSearch();

                    //文本框失去焦点，不然按回车会不停的发出请求
                    keyInput.get(0).blur();
                    autoDiv.hide();
                }
            }

        }
    });


    //提交按钮的事件
    var commitBtn=$("#commit");
    //commitBtn的click事件
    commitBtn.click(commitSearch);

    //提交函数
    function commitSearch(){

        var cv=keyInput.val();

        //cv=encodeURIComponent(cv);

        window.location.href="../SearchIndex?paramInfo="+cv;
       // $.get("../SearchIndex",{paramInfo:cv});
       
    }
    //keyInput失去焦点后关闭提示层
    //keyInput.blur(function(){
        //autoDiv.hide();
        //highlightindex = -1;
   // });
});

 Servlet。。。。。。。。。。。。。。。。。



   1. public void doPost(HttpServletRequest request, HttpServletResponse response) 
   2.             throws ServletException, IOException { 
   3.  
   4.         String paramInfo = request.getParameter("paramInfo"); 
   5.  
   6.         System.out.println(paramInfo); 
   7.          
   8.     //…………数据处理 
   9.  
  10.         request.setAttribute("autoCompleteList", list); 
  11.  
  12.         request.getRequestDispatcher("./js/autoComplete.jsp").forward(request, 
  13.                 response); 
  14.  
  15.     } 

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        String paramInfo = request.getParameter("paramInfo");

        System.out.println(paramInfo);
       
    //…………数据处理

        request.setAttribute("autoCompleteList", list);

        request.getRequestDispatcher("./js/autoComplete.jsp").forward(request,
                response);

    }

 

体现mvc的思想，jQuery获得的返回页面是text/xml格式

Xml代码

   1. <%@ page language="java" pageEncoding="utf-8" contentType="text/xml; charset=utf-8"%> 
   2. <%@taglib prefix="html" uri="http://struts.apache.org/tags-html" %> 
   3. <%@taglib prefix="logic" uri="http://struts.apache.org/tags-logic" %> 
   4. <%@taglib prefix="bean" uri="http://struts.apache.org/tags-bean" %> 
   5.  
   6. <keys> 
   7.     <logic:notEmpty name="autoCompleteList" scope="request"> 
   8.         <logic:iterate id="liststr" name="autoCompleteList" scope="request"> 
   9.             <key><bean:write name="liststr"/></key> 
  10.         </logic:iterate> 
  11.     </logic:notEmpty> 
  12.      
  13. </keys>