CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
aozora
aozora

Reputation: 421

Auto complete pushes other div down. Need help to make a scroll auto complete

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:
This is what it looks like

Upvotes: 1

Views: 566

Answers (2)

ZZZZtop
ZZZZtop

Reputation: 457

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/

Upvotes: 2

DinoMyte
DinoMyte

Reputation: 8868

Try style="overflow: scroll"

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

Upvotes: 2

Related Questions