自动完成推送其他div。需要帮助才能使滚动自动完成

Question

我有一个具有自动完成功能的输入框，但是假设有100个条目与它显示的值匹配，并将其他div一直向下推。我需要帮助，如何使类似的显示最多5，然后才能滚动到其他值。希望我需要改变的是css部分。

这是我的输入框。请注意，这是在表格中：

<input type='text' id='text_lot_number' name='text_lot_number'>
<div class="results results_lot_number"></div>

然后这是我的脚本部分。这是在document.ready中：

$("#text_lot_number").keyup(function() {
    var keyword = $("#text_lot_number").val();
    if (keyword.length >= MIN_LENGTH) {
        $.get( "autocomplete.php", { keyword: keyword, method: 'LOTNUM' } )
        .done(function( data ) {
            $('.results_lot_number').html('');
            var results = jQuery.parseJSON(data);
            $(results).each(function(key, value) {
                $('.results_lot_number').append('<div class="item">' + value + '</div>');
            });
            $('.item').click(function() {
                var text = $(this).html();
                $('#text_lot_number').val(text);
                $('.results_lot_number').hide();
            });
            $('.results_lot_number').show();
        });
    } 
    else {
        $('.results_lot_number').html('');
    }
});

autocomplete.php只包含数组中的建议。对于简化形式，我们使用：

<?php
$aryAutoComplete = array("Test1","Test2","Test3","Test4");
echo json_encode($aryAutoComplete);

这就是它的样子：

Answer 1

尝试style="overflow: scroll"

<div class="results results_lot_number" style="overflow: scroll"></div>

Answer 2

您必须设置max-height多个像素，5个列表项在一起，然后设置overflow: scroll;。

例如：

.results {
    max-height: 300px;
    overflow: scroll;
}

这里还有一个小提琴：https://jsfiddle.net/s4dm0jaw/