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

需求：
實現(xiàn)帶提示的input框，類似百度搜索，有改動的時候去獲取常用關(guān)鍵詞，數(shù)據(jù)來源于系統(tǒng)數(shù)據(jù)庫，支持鼠標(biāo)選擇或鍵盤選擇

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

實現(xiàn)代碼：

復(fù)制代碼 代碼如下:

//By COoL

//定義全局變量用于儲存提示層
var liketips;

//監(jiān)聽改動或得到焦點事件

//禁用chrome和firefox瀏覽器自帶的自動提示
$('.getsearchjson').attr("autocomplete","off");
$('.getsearchjson').bind("propertychange input focus",function(event){
    $this=$(this);
    if(event.type!='focus'){
        //如果有改變，則狀態(tài)定為必須重新選擇，因為純?nèi)耸州斎霑?dǎo)致value無法插入
        $this.data('ok',false);
    }

    //獲取input框位置并計算提示層應(yīng)出現(xiàn)的位置
    var top=1*$this.offset().top+25;
    var left=1*$this.offset().left;
    var width=1*$this.width()+12;

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

    //加載前先顯示loading動態(tài)圖
    $liketips.append('<img src="/images/loading.gif" />');
    $liketips.appendTo($this.parent());
    $liketips.show();

    //定義ajax去獲取json，type參數(shù)通過data-type設(shè)置，keyword則是目前已輸入的值
    //返回值以table形式展示
    $.post('/data/search.do',{type:$this.data('type'),keyword:$this.val()},function(json){
        $liketips.empty();
        var htmlcode="<table cellspacing='0' cellpadding='2'><tbody>";
        for(var i=0;i<json.datas.length;i++){
            //這里我需要用到value和title兩項，所以用data-value傳遞多一個參數(shù)，在回車或鼠標(biāo)點擊后賦值到相應(yīng)的地方，以此完美地替代select
            htmlcode+='<tr data-value="'+json.datas[i][0]+'"><td>'+json.datas[i][1]+'</td></tr>';
        }
        htmlcode+="</tbody></table><span>請務(wù)必在此下拉框中選擇</span>";
        //把loading動態(tài)圖替換成內(nèi)容
        $liketips.html(htmlcode);
    },"json");
});

//焦點消失時確保數(shù)據(jù)來自選項，隱藏提示框體
$('.getsearchjson').blur(function(){
    //因為鼠標(biāo)點擊時blur動作結(jié)算在click之前，setTimeout是為了解決這個問題
    $oldthis=$(this);
    setTimeout(function(){
        if($oldthis.data('ok'))
            $(liketips).fadeOut('fast');
        else{
            alert('為保證數(shù)據(jù)準(zhǔn)確性，請務(wù)必在下拉提示中選擇一項，謝謝合作');
            $oldthis.focus();
        }
    },200);
});

//監(jiān)聽鍵盤動作
$('.getsearchjson').keydown(function(event){
    //console.log(event.keyCode);
    $this=$(this);
    if(event.keyCode==40){
        //按鍵是向下
        $nowtr=$('tr.selectedtr');
        //如果已存在選中，則向下，否則，選中選單中第一個
        if($nowtr.length>0){
            $nexttr=$nowtr.next('tr')
            //如果不是最后選項，向下個tr移動，否則跳到第一個tr
            if($nexttr.length>0){
                $('tr.selectedtr').removeClass();
                $nexttr.addClass('selectedtr');
            }
            else{
                $('tr.selectedtr').removeClass();
                $nowtr.parent().find('tr:first').addClass('selectedtr');
            }
        }
        else{
            $('.liketips').find('tr:first').addClass('selectedtr');
        }
    }
    else if(event.keyCode==38){
        //按鍵是向上
        $nowtr=$('tr.selectedtr');
        //如果已存在選中，則向下，否則，選中選單中第一個
        if($nowtr.length>0){
            $prevtr=$nowtr.prev('tr')
            //如果不是最后選項，向下個tr移動，否則跳到第一個tr
            if($prevtr.length>0){
                $('tr.selectedtr').removeClass();
                $prevtr.addClass('selectedtr');
            }
            else{
                $('tr.selectedtr').removeClass();
                $nowtr.parent().find('tr:last').addClass('selectedtr');
            }
        }
        else{
            $('.liketips').find('tr:last').addClass('selectedtr');
        }
    }
    else if(event.keyCode==13){
        //按鍵是回車，則確定返回并隱藏選框
        $nowtr=$('tr.selectedtr');
        if($nowtr.length==1){
            //設(shè)置value值到input框通過參數(shù)data-valueto配置的value值存儲項中去，一般是hidden項
            $valuefield=$('input[name='+$this.data('valueto')+']');
            $valuefield.val($nowtr.data('value'));
            $this.val($nowtr.text());
            //設(shè)置狀態(tài)是從選項中選擇，允許blur
            $this.data('ok',true);
        }
        $(liketips).fadeOut('fast');
        return false;
    }
    //console.log(event.keyCode);
    return true;
});

//監(jiān)聽鼠標(biāo)動作，mouseover改變選中項
$(document).delegate('.liketips td','mouseover',function(){
    $nowtr=$(this).parent();
    $nowtr.siblings('tr').removeClass();
    $nowtr.addClass('selectedtr');
});

//監(jiān)聽鼠標(biāo)動作，click選定
$(document).delegate('.liketips td','click',function(){
    $nowtr=$(this).parent();
    if($nowtr.length==1){
        //取得該提示層對應(yīng)的input框
        $inputfield=$nowtr.parent().parent().parent().siblings('input.getsearchjson');

        //設(shè)置value值到input框通過參數(shù)data-valueto配置的value值存儲項中去，一般是hidden項
        $valuefield=$('input[name='+$inputfield.data('valueto')+']');
        $valuefield.val($nowtr.data('value'));
        $inputfield.val($nowtr.text());
        //設(shè)置狀態(tài)是從選項中選擇，允許blur
        $inputfield.data('ok',true);
    }
    $(liketips).fadeOut('fast');
});

CSS這里就不放出了，我的實現(xiàn)效果如下：

復(fù)制代碼 代碼如下:

//禁用chrome和firefox瀏覽器自帶的自動提示
$this.attr("autocomplete","off");