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

如何在Jquery中使用箭头键

1 个答案: