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

I have a input box that has autocomplete however suppose there are 100 entries that match the value it displays all and pushes other div all the way down. I need help on how to make a like display up to 5 only then make it possible to scroll to other values. Hopefully all I need to change is in the css part.

Here is my input box. Note this is inside a table:

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

Then here is my script part. This is inside 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 just contains the suggestion in array. For simplified form let's use this:

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

This is what it looks like:

Try style="overflow: scroll"

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

You must set a max-height of however many pixels, 5 list items are together, then set overflow: scroll;.

So for example:

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

Also here is a fiddle with all of it together: https://jsfiddle.net/s4dm0jaw/