Question

这一切都很有效，除了用户应该能够使用它们的向上/向下箭头向上和向下滚动结果列表。我无法弄清楚为什么上/下根本不起作用。控制台正在记录相应的功能正在运行，但选择实际上不起作用。任何线索都会很棒。

<input id="search_box" type="text" style="float:right;margin-bottom:2px;">

            <div class="suggestions">

                <ul id="results_list">

                </ul>

            </div>

<style>

#results_list {
    width: 220px;
    text-align: left;
    float: right;
    padding: 0;
    z-index: 10;
    position: relative;
    background-color: white;
}

#results_list li {
    background: white;
    border-bottom: solid 1px #eee;
    border-left: solid 1px #eee;
    border-right: solid 1px #eee;
    padding: 2px 3px 2px 3px;
    margin-bottom: 0px;
}

#results_list a {
    text-decoration: none;
}

.selected {
    background: black;
}

</style>

<script>

$('#search_box').keyup(function(e) {
    if ($('#search_box').val().length) {
        $.ajax({
            url: '/api/jsonrpc',
            type: 'POST',
            data: JSON.stringify({
                jsonrpc: '2.0',
                method: 'search_titles',
                params: [$('#search_box').val()],
                id: 'jsonrpc'
            }),
            success: function (data) {
                $('#results_list').show();
                var items = [];
                $('#results_list').empty();
                $.each(data.result, function(i, item) {
                    items.push("<li><a href='/title/" + item._id + "'>" + item.Name + "</a></li>");
                });
                $('#results_list').append( items.join('') );
            },
            error: function (data) {
                alert('There was a problem.  Please try again.')
            }
        });
    } else {
        $('#results_list').hide();
    }
})

var $listItems = $('li');

$('input').keydown(function(e)
{
    var key = e.keyCode,
        $selected = $listItems.filter('.selected'),
        $current;

    if ( key != 40 && key != 38 ) return;

    $listItems.removeClass('selected');

    if ( key == 40 ) // Down key
    {
        console.log('called down')
        if ( ! $selected.length || $selected.is(':last-child') ) {
            $current = $listItems.eq(0);
        }
        else {
            $current = $selected.next();
        }
    }
    else if ( key == 38 ) // Up key
    {
        console.log('called up')
        if ( ! $selected.length || $selected.is(':first-child') ) {
            $current = $listItems.last();
        }
        else {
            $current = $selected.prev();
        }
    }

    $current.addClass('selected');
});

</script>

Answer 1

添加：

$listItems = $('li')

...到Ajax成功回调结束。

jQuery对象不会自动刷新自己以包含恰好与其原始选择器匹配的新添加元素，因此您现有的代码正在尝试滚动实际上不包含任何内容的jQuery对象（$listItems）元素，因为它是在填充列表之前创建的。

上/下键不使用javascript滚动无序列表

1 个答案: