-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 に答える