如何在Jquery中使用箭頭鍵

Question

我試圖模仿谷歌的建議清單：

function el(tid) {
    return document.getElementById(tid);
}

function addScript(u) {
    var head = document.getElementsByTagName('head')[0],
        sc2 = document.createElement('script');
    sc2.src = u;
    head.appendChild(sc2);
    setTimeout(function () {
        head.removeChild(sc2);
        sc2 = null;
    }, 600);
} //end addScript()

function suggest(data) {
    var sel = el("test");
    sel.innerHTML = '';
    for (x = 0; x < data[1].length; x++) {
        sel.innerHTML += '<li class="uli" >' + data[1][x][0] + '</li>';
    }
}


el("inp").onkeyup = function () {
    addScript("http://www.google.nl/complete/search?callback=suggest&q=" + this.value);
};

問題是我希望能夠使用箭頭鍵進入建議列表，並且我希望在輸入字段中顯示“當前”建議值。 所以我嘗試使用Jquery這樣的東西：

$("#inp").live("keydown", function (e) {


    var curr = $('#test').find('.current');
    if (e.keyCode == 40) {
        if (curr.length) {
            $(curr).attr('class', 'uli');
            curr = $(curr).next();
        }
        if (curr.length) {
            curr.attr('class', 'uli current');
        } else {
            $('#center li:first-child').attr('class', 'uli current');

        }
    }
    if (e.keyCode == 38) {
        if (curr.length) {
            $(curr).attr('class', 'uli');
            curr = $(curr).prev();
        }
        if (curr.length) {
            curr.attr('class', 'uli current');
        } else {
            $('#center li:last-child').attr('class', 'uli current');
        }
    }







    $("#inp").live("keydown", function (e) {
        var search_terms = $('li.current').text();

        if (e.keyCode == 40) {
            $('#inp').val(search_terms);
        }
        if (e.keyCode == 38) {
            $('#inp').val(search_terms);

        }

它不起作用，因為（我認為..）前一個代碼立即請求'當前'建議。 我把所有東西放在這里： JS Bin

Answer 1

為什么重新創建輪子？

jQuery UI自動完成

或者看看其他插件

代碼的問題是，當您致電獲取值時，需要取消箭頭按鍵。

el("inp").onkeyup = function () {
    //if not the arrow keys, fetch the list
    if( ... ){
        addScript("http://www.google.nl/complete/search?callback=suggest&q=" + this.value);
    }
}

當你使用jQuery時， el("inp")也是什么？ 我希望看到$("foo").keyup( function(){} );