如何在 Jquery 中使用箭头键

Question

我正在尝试用这个来模仿 Google 建议列表：

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 Autocomplete

或者看看其他plugins

您的代码的问题是您需要在调用以获取值时取消箭头按键。

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(){} );