讓input框實現類似百度的搜尋提示(基於jquery事件監聽)_jquery

挺炫的一個效果，百度和谷歌好像已經實現好多年了，我以為在網上能輕易找到代碼來實現這個效果。真正遇到這個需求，發現還真找不到。於是自己動手寫這個效果，由於我是把效果整合到我的整套框架裡，所以沒有進行單獨的封裝。

需求：
實現帶有提示的input框，類似百度搜索，有改動的時候去獲取常用關鍵字，數據來源於系統數據庫，支持鼠標選擇或鍵盤選擇

思路：
框架一貫思路，透過class作為監聽入口，透過data作為資料傳遞；
透過監聽input和propertychange事件實現即時的改動監聽，input是主流，propertychange是ie，你懂的；
透過ajax實現post動作，把返回內容顯示成類似選框的形式；
監聽鍵盤的上鍵（38）、下鍵（40）、回車鍵（13），透過綁定keydown ，判斷event.keycode實現；
監聽滑鼠的mouseover和click事件，與鍵盤動作要完美結合；
若input內容要求與已知選項必須一致，則監聽blur事件，判斷是否允許換焦點；

實作程式碼：

複製程式碼 程式碼如下:

//By COoL

//定義全域變數用於儲存提示層
var liketips;

//監聽改動或得到焦點事件

//停用chrome和firefox瀏覽器自帶的自動提示
$('.getsearchjson').attr("autocomplete","off");
$('.getsearchjson').bind( "propertychange input focus",function(event){
    $this=$(this);
    if(event.type!='focus'){
  必須重新選擇，因為純人手輸入會導致value無法插入
        $this.data('ok',false);
    }

  的位置
    var top=1*$this.offset().top 25;
    var left=1*$this.offset().left;
    var width=1*1 width=1*$. ) 12;

    //重建儲存提示層並讓其在適當位置顯示
    $(liketips).remove();
    liketips=document.createElement('div); >    $liketips=$(liketips);
    //class樣式這裡不提供，最主要是position:absolute
    $liketips.addClass("liketips");
top 'px',left:left 'px',width:width 'px'});

    //載入前先顯示loading動態圖
    $liketips.append('');
    $liketips.appendTo($this.parent());
    $liketips.show();

    $liketips.show();

 🎜>   /定義ajax去取得json，type參數透過data-type設置，keyword則是目前已輸入的值
    //返回值以table形式展示
    $.post('/data/search.do', {type:$this.data('type'),keyword:$this.val()},function(json){
        $liketips.empty();
   0' cellpadding='2'>";
        for(var i=0;i      所以用data-value傳遞多一個參數，在回車或滑鼠點擊後賦值到對應的地方，以此完美地取代select
            htmlcode ='' json.datas[i][1] '';
        }
        htmlcode =" 請務必在此下拉框中選擇";
        //將loading動態圖換成內容
        $liketips.html(htmlcode);
     $liketips.html(htmlcode);
     $liketips.html(htmlcode);
//焦點消失時確保資料來自選項，隱藏提示框體
$('.getsearchjson').blur(function(){
    //因為滑鼠點擊時blur動作結算在click之前，setTimeout是為了解決這個問題
    $oldthis=$(this);
    setTimeout(function(){
     $(liketips).fadeOut('fast');
        else{
           this. focus();
        }
    },200);
});

//監聽鍵盤動作
$('.getsearchjson').keydown(function(event){
    //console.log(event.keyCode);
    //console.log(event.keyCode);
    //console.log(event.keyCode);
    //console.log(event.keyCode);     //console.log(event.keyCode);
    //console.log(event.keyCode);
    $this $this $this. =$(this);
    if(event.keyCode==40){
        //按鍵是向下
      有選中，則向下，否則，選取選單中第一個
        if($nowtr.length>0){
          不是最後選項，向下個tr移動，否則跳到第一個tr
            if($nexttr.length>0){
                    $nexttr .addClass('selectedtr');
            }
            moveClass();
                $nowtr.parent().find('tr:first' ).addClass('selectedtr');
            }
        }
   ps').find('tr:first').addClass('selectedtr');
        }
    }
    else if(event.keyCode==38){
    
        //如果已存在選中，則向下，否則，選中選單中第一個
        if($nowtr.length>0){
            $prevtr=$nowtr.prev('tr')
            //如果不是最後選項，向下個tr移動，否則跳到第一個tr
            if($prevtr.length>0){
                    $ prevtr.addClass('selectedtr');
            }
           .removeClass();
                $nowtr.parent().find('tr:last ').addClass('selectedtr');
            }
        }
   ps').find('tr:last').addClass('selectedtr');
        }
    }
    else if(event.keyCode==13){
     tr. selectedtr');
        if($nowtr.length==1){
            //設定value值至input框透過資料-value $valuefield=$('input[name=' $this.data('valueto') ']');
            $valuefield.val($nowtr.data('value H));             //設定狀態下為選項選擇，並允許blur
               $(liketips ).fadeOut('fast');
        return false;
    }
    //console.log(event.keyCode);
    return true;
});

//監聽滑鼠動作，mouseover改變選取項目

//監聽滑鼠動作，mouseover改變選取項目
$(document). delegate('.liketips td','mouseover',function(){
    $nowtr=$(this).parent();
    $nowtr.siblings('tr').removeClass();     $nowtr.addClass('selectedtr');
});

//監聽滑鼠動作，click選擇
$(document).delegate('.liketips td','click ',function(){
    $nowtr=$(this).parent();
    if($nowtr.length==1){
      >        $inputfield=$nowtr.parent().parent().parent().siblings('input.getsearchjson');

      在儲存項目中去，一般是hidden項目
        $valuefield=$('input[name=' $inputfield.data('valueto') ']');
     ('value'));
        $inputfield.val($nowtr.text());
        //設定狀態是從選項中選擇，允許blur      //設定狀態是從選項中選擇，允許blur    true);
    }
    $(liketips).fadeOut('fast');
});

CSS這裡就不放了，我的實現效果如下：

複製程式碼複製程式碼

複製程式碼

複製程式碼複製程式碼複製程式碼複製程式碼複製程式碼複製碼> 程式碼如下: //停用chrome與firefox瀏覽器自帶的自動提示$this.attr("autocomplete","off");