CODEWITHSUNDEEP
javascriptgoogle-maps-api-3google-places-api
adam
adam

Reputation: 807

Google places autocomplete - limit number of results

I there any way to display fewer results than 5 (default) in google places autocomplete?

Upvotes: 0

Views: 4203

Answers (2)

Manuel
Manuel

Reputation: 337

With modern css you can even limit the amount of the displayed results. For example 3 results:

.pac-item { display: none; }
.pac-item:nth-child(-n+3) { display: block; }

Or something in between :-) https://developer.mozilla.org/de/docs/Web/CSS/:nth-child

Documentation of html class names can be found on the official Google page: https://developers.google.com/maps/documentation/javascript/places-autocomplete#style-autocomplete

Upvotes: -1

Chris Green
Chris Green

Reputation: 4427

There is no way to display less than 5 results that I am familiar with, you could however use css to change the height of the autocomplete dropdown.

The div that holds the autocomplete results is styled using the pac-container class which already has overflow set to hidden, so if you set the height to something like 50px any results that fill the div past 50px will be hidden. On the example this will hide the last two results and show only three.

.pac-container {
  height: 50px;
}

If just want to change the height of the dropdown and allow the user to scroll down to see extra results you can set the height to something like 50px and set overflow-y to scroll.

.pac-container {
  height: 50px;
  overflow-y: scroll;
}

Upvotes: 2

Related Questions