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

 

<html> 
  <head><title>AutoComplete-Sample</title> 
 
     <style>
     #auto_div{  
    position:absolute;  
    border-width:1px;  
    border:1px #808080 solid;   }  

     </style>
      <script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"></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, 100);
                 //处理上下键(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: "/Office/GetSQ.ashx",   //发送请求的地址  
                 data: "reqWord=" + $('#auto_txt').val(),
                 success: processAjaxResponse
             });
         }

         /**  
         * 处理Ajax回复  
         * @param data Ajax请求得到的返回结果为dom文档对象  
         */
         function processAjaxResponse(data) {
             $('#auto_div').html('').show();

        

             var words = data.split("-");

 


             jQuery.each(words, function (i) {


                 var word_div = $("<div style='width:100%;'></div>");
                 word_div.html(words[i]);
                 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> 

你可能感兴趣的:(jquery)