[FIXED] How can I limit the div (autocomplete-item) created by JS for autocomplete search?

Issue

I have created a autocomplete search box using the code in the link: w3schools

I am using a list of 3000 cities (JSON file). When performing the search, the search list is too long. How can I limit the size of the divs being created by JS or even set a fixed height for the division containing that list and make it scrollable?

I really appreciate any help you can provide.

Solution

You can add max-height to the outer div and handle the overflow

.autocomplete-items {
    max-height: 200px;
    overflow-y: scroll;
}

Answered By - Abito Prakash

Answer Checked By - David Goodson (PHPFixing Volunteer)