The suggestions are working as expected on a page.. but the exact form i have it on a pop-up with same ID is not working it is not showing the suggestions for autofill. Below are the details of what i tried so far. Below is my javascript code document.addEventListener("DOMContentLoaded", function() { setupAutocomplete(); // Initialize the custom autocomplete on page load // Reinitialize autocomplete when the Elementor pop-up opens jQuery(document).on('elementor/popup/show', function() { setTimeout(setupAutocomplete, 500); // Delay to ensure input is in the DOM }); function setupAutocomplete() { var addressInput = document.getElementById("wpforms-8-field_4"); if (addressInput) { addressInput.removeEventListener("input", handleInput); // Prevent duplicate event listeners addressInput.addEventListener("input", handleInput); } } function handleInput(event) { var query = event.target.value; var addressInput = event.target; if (query.length > 2) { var url = `http://localhost:10004/wp-json/myplugin/v1/places?input=${encodeURIComponent(query)}`; fetch(url) .then(response => response.json()) .then(data => { var suggestions = data.predictions; showSuggestions(suggestions, addressInput); }) .catch(error => console.error("Error fetching place suggestions:", error)); } } function showSuggestions(suggestions, inputElement) { var suggestionsContainer = document.createElement("div"); suggestionsContainer.className = "custom-suggestions"; suggestions.forEach(suggestion => { var suggestionItem = document.createElement("div"); suggestionItem.textContent = suggestion.description; suggestionItem.addEventListener("click", function() { inputElement.value = suggestion.description; clearSuggestions(); // Clear suggestions after selection }); suggestionsContainer.appendChild(suggestionItem); }); clearSuggestions(); // Clear any existing suggestions before adding new ones inputElement.parentNode.appendChild(suggestionsContainer); } function clearSuggestions() { var existingSuggestions = document.querySelector(".custom-suggestions"); if (existingSuggestions) { existingSuggestions.remove(); } } }); Here is my functions.php code function enqueue_address_autocomplete_scripts() { // Enqueue Google Places API wp_enqueue_script('google-places', 'https://maps.googleapis.com/maps/api/js?key=placeapikey&libraries=places', [], null, true); // Enqueue custom JavaScript file for address autocomplete wp_enqueue_script('address-autocomplete', get_template_directory_uri() . '/assets/js/address-autocomplete.js', ['jquery'], null, true); } add_action('wp_enqueue_scripts', 'enqueue_address_autocomplete_scripts'); add_action('rest_api_init', function () { // Register the custom REST API route register_rest_route('myplugin/v1', '/places', array( 'methods' => 'GET', 'callback' => 'get_place_suggestions', )); // Enable CORS header('Access-Control-Allow-Origin: *'); }); function get_place_suggestions(WP_REST_Request $request) { $apiKey = 'places-api-key'; $query = urlencode($request->get_param('input')); $url = "https://maps.googleapis.com/maps/api/place/autocomplete/json?input={$query}&types=address&key={$apiKey}"; $response = wp_remote_get($url); if (is_wp_error($response)) { return new WP_REST_Response('Error fetching suggestions', 500); } $body = wp_remote_retrieve_body($response); return new WP_REST_Response(json_decode($body), 200); } The site is on wordpress using elementor page builder for pop-up. There is nothing on console too.