-1

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

<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>
4

1 回答 1

0

添加这个：

$listItems = $('li')

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

jQuery 对象不会自动刷新自身以包含恰好匹配其原始选择器的新添加元素，因此您现有的代码正在尝试滚动浏览$listItems实际上不包含任何元素的 jQuery 对象 ()，因为它是在列表之前创建的有人居住。

于 2013-02-03T12:08:50.807 回答