<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/header.jsp"%>
<html>
 <head>
  <title>AutoComplete-Sample</title>


  <style type="text/css">
#auto_div {
 border-width: 1px;
 border: 1px #808080 solid;
 position: absolute;
 top: 23;
 left:72;
 width:155px;
 height: auto;
}
</style>


  <script type="text/javascript" language="javascript"> 
       //高亮的索引           
       var highLightIndex = -1;  
         //超时的标识（对用户连续快速按下键盘的事件做延时处理，只对用户在500ms内最后一次请求，让其生效）  
         var timeoutId;  
         $(document).ready(function(){  
           init();  
            $('#auto_txt').bind('keydown',processKeyup);  
        });  
 
         /**  
         * 处理键盘按下后弹起的事件  
         * @param event  
          */  
         function processKeyup(event){  
               var myEvent = event || window.event;  
               var keyCode = myEvent.keyCode;  
               //输入是字母，或者退格键则需要重新请求  
              if((keyCode >= 48 && 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();    
         }  
 
         /**  
          * 处理Ajax请求  
          * @param data  
          */  
         function processAjaxRequest(){  
             $.ajax({  
                 type:"post",       //http请求方法,默认:"post"  
                 url:"sellDetailAction.getMemList.do",   //发送请求的地址  
                 data:"reqWord="+$('#auto_txt').val(),  
                 dataType:"String",   //预期服务器返回的数据类型  
                 success:processAjaxResponse  
              });  
         }  
 
         /**  
          * 处理Ajax回复  
          * @param data Ajax请求得到的返回结果为dom文档对象  
          */  
         function processAjaxResponse(data){  
             $('#auto_div').html('').show();  
            var words = data.split("&");
            for(var i = 0 ; i < words.length ; i ++){
               //  var newDivNode=$("<div>").attr("id",i);
                // newDivNode.html(words[i].trim()).appendTo($('#auto_div'));
           
                var word_div = $('<div></div>').attr("id",i);  
               word_div.html(words[i].trim());  
              word_div.hover(fnOver,fnOut);  
               word_div.click(getAutoText); 
              $('#auto_div').append(word_div);  
            }  
         }  
        /**  
          * 处理鼠标滑过  
          */  
        function fnOver(){   
              changeToWhite();  
             $(this).css('background-color','pink');    
             highLightIndex = $(this).attr("id");  
             //下面一行注释掉了，百度搜索也没这功能，就是鼠标移动时，跟着改变搜索框的内容  
             $('#auto_txt').val($('#auto_div').children().eq(highLightIndex).html());  
         }  
           
         /**  
         * 处理鼠标移除  
          */  
         function fnOut(){  
             $(this).css('background-color','white');  
        }  
 
         /**  
          * 得到自动填充文本  
         */  
         function getAutoText(){  
            //有高亮显示的则选中当前选中当前高亮的文本 
                $('#auto_txt').val($(this).html());  
                $('#auto_div').html('').hide();  
                highLightIndex = -1  ;
         }  
         /**  
          * 处理按下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" >
     <div  id="auto_div" ></div>
 </body>
</html>
运行之后效果图