The autocomplete input field allows you to choose a value from a pre-populated list of suggestions. The location search input box benefits greatly from the autocomplete option. It allows you to choose a suitable location without having to type the complete address. Using the Google Maps JavaScript API, autocomplete capability may be quickly added to the input field for text-based geographic location searches.

Using jQuery, you can convert text input to a location search box using Google Maps JavaScript API using Places library. The user’s input of the address or location information can be collected using the location autocomplete textbox. The place predictions appear beneath the input field when the user begins entering in the location search area. In this article, we’ll teach you how to use the Google Maps JavaScript API and jQuery to add an autocomplete address field to an HTML form.

jQuery Library is a collection of jQuery libraries.
Include the jQuery library because it is used to trigger the event handler.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

JavaScript API for Google Maps
To search for places and provide location suggestions in the autocomplete box, Google Maps JavaScript API and Places Library are utilised.

Use the Places library (libraries=places) to load the Google Maps JavaScript API.
In the key argument, specify the API key.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=Your_API_Key"></script>

Google Maps can help you find places. API for JavaScript JavaScript Code:
Using the Google Maps Locations library’s Autocomplete() method, the following JavaScript code enables autocomplete places search in the provided input field.

The matching places are collected from the Places library and added to the recommendations box based on the search keyword.
The getPlace() method is used to retrieve the selected location’s latitude and longitude.
Set the selected latitude and longitude to the hidden input field for form submission value. to the element for web page display.

var searchInput = 'search_input';
$(document).ready(function () {
var autocomplete;
autocomplete = new google.maps.places.Autocomplete((document.getElementById(searchInput)), {
types: ['geocode'],
});
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var near_place = autocomplete.getPlace();
document.getElementById('loc_lat').value = near_place.geometry.location.lat();
document.getElementById('loc_long').value = near_place.geometry.location.lng();

document.getElementById('latitude_view').innerHTML = near_place.geometry.location.lat();
document.getElementById('longitude_view').innerHTML = near_place.geometry.location.lng();
});
});

When the input field value is changed with jQuery, the latitude and longitude are removed.

$(document).on('change', '#'+searchInput, function () {
document.getElementById('latitude_input').value = '';
document.getElementById('longitude_input').value = '';
document.getElementById('latitude_view').innerHTML = '';
document.getElementById('longitude_view').innerHTML = '';
});

Create an input element to which the autocomplete location search will be placed in HTML code.

Define the element’s ID attribute and use it as a selection (searchInput) in JavaScript code.

<!-- Autocomplete location search input --> 
<div class="form-group">
<label>Location:</label>
<input type="text" class="form-control" id="search_input" placeholder="Type address..." />
<input type="hidden" id="loc_lat" />
<input type="hidden" id="loc_long" />
</div>
<!-- Display latitude and longitude -->
<div class="latlong-view">
<p><b>Latitude:</b> <span id="latitude_view"></span></p>
<p><b>Longitude:</b> <span id="longitude_view"></span></p>
</div>

Restriction by Country
With the componentRestrictions option in the Autocomplete() method, you can apply a nation restriction to the locations search.

var autocomplete;
autocomplete = new google.maps.places.Autocomplete((document.getElementById(searchInput)), {
types: ['geocode'],
componentRestrictions: {
country: "USA"
}
});

Note :

In the data creation form, where the address information must be entered, the location autocomplete field comes in handy. This autocomplete feature is also available in the location search field. Our autocomplete location search script will assist you in adding a user-friendly method to the web form’s address input field. Using jQuery, you can quickly customise the autocomplete location textbox feature to meet your needs.