Question

我正面临着一个我似乎无法解决的问题。我有一个功能，当用户开始输入时，它会加载搜索结果。在输入时，选择第一个结果。

现在我正在尝试检测向下箭头键，以便我可以选择下一个搜索结果。

   $(document).on('input propertychange', '#customer', function (event) {
        searchCustomer(this.value);

        delay(function () {
            $('#search_results').children().first().toggleClass('fancy-border');
        }, 100);
    });

    $(document).on('input propertychange', '#product', function () {
        searchProduct(this.value);
    });

    $(document).on('input keypress', '#customer,#product', function (event) {

        switch (event.keyCode) {
            case 40:
                console.log('down');
                $('#search_results').find('.fancy-border').removeClass('fancy-border').next('.customer-item').toggleClass('fancy-border');
                break;
            case 39:
                console.log('right');
                break;
            case 37:
                console.log('left');
                break;
            case 13:
                console.log('enter');
//                $('#search_results').find('.fancy-border').trigger('click');
                break;
        }
    });

输入完全正常，也记录，但箭头不起作用，没有一个。有人能指出我正确的方向吗？

我尝试创建一个JSFiddle：http://jsfiddle.net/28da2u6r/2/

Answer 1

使用.keydown(...)代替.on(...)：

$(document).keydown('.test', function (event) {
    switch (event.keyCode) {
        case 40:
            console.log('down');
            break;
        case 39:
            console.log('right');
            break;
        case 37:
            console.log('left');
            break;
        case 13:
            console.log('enter');
            break;
    }
});

JsFiddle

JQuery检测向下按下箭头

1 个答案: