ARTICLE AD BOX
When I type a space into the end of my input, all the suggestions from the Google Places (New) Autocomplete Data API disappear. When you lose focus (click somewhere else) and refocus on the input, the suggestions show up, even with the trailing whitespace. Also, even if you delete the trailing whitespace no results will show up unless you lose focus and refocus.
JS:
async function autocomplete(query) { const response = await fetch( "https://places.googleapis.com/v1/places:autocomplete", { method: "POST", headers: { "Content-Type": "application/json", "X-Goog-Api-Key": "AIzaSyC-NJ9bxaWdlLQBmHxR-QDgwFXsbGX0oKg" // Uncomment these line to use real API }, body: JSON.stringify({ input: query, }) } ) const data = await response.json(); return data.suggestions; } const input = document.querySelector("#address"); const results = document.querySelector("#results"); input.addEventListener("input", async () => { if (input.value.trim().length < 3) { return; // Don't call API for short queries } else { const predictions = await autocomplete(input.value.trim()); if (!predictions || predictions.length === 0) { results.innerHTML = "<li class='three'>No results found</li>"; return; } results.innerHTML = ""; // Clear previous results const variable = document.querySelector(".three"); if (variable) { document.querySelector(".three").classList.add("hidden"); } predictions.forEach(prediction => { const li = document.createElement("li"); li.textContent = prediction.placePrediction.text.text; li.dataset.action = "select-address"; results.appendChild(li); }); } }); function select_address(event) { input.value = event.textContent; } const ACTIONS = { "select-address": select_address } document.addEventListener("click", (click_event) => { const target = click_event.target.closest("[data-action]"); if (!target) return; const action_name = target.dataset.action; console.log(`Action triggered: ${action_name}`); if (ACTIONS[action_name]) { ACTIONS[action_name](target, click_event); } }); input.addEventListener("focus", function() { document.querySelector("#results").classList.remove("hidden"); }); document.addEventListener("click", (event) => { if (!input.contains(event.target) && !results.contains(event.target)) { document.querySelector("#results").classList.add("hidden"); }; });HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="auto.css"> </head> <body> <button> <input type="text" id="address" placeholder="Enter address" class="address" autocomplete="off"> <ul id="results" class="address-suggestion hidden"> <li class="three">Please enter at least 3 characters</li> </ul> </button> <script src="auto.js" type="module"></script> </body> </html>CSS:
:root { font-family: Arial, Helvetica, sans-serif; font-size: 1em; } body { margin: 0; padding: 0; } div { display: flex; flex-direction: column; position: relative; } input { position: absolute; left: 0px; right: 50px; height: 100%; border-radius: 50px; border-style: none; width: 94%; box-sizing: border-box; padding: 0 20px; font-size: clamp(0.5rem, 0.7vw + 0.5rem, 100rem); } input:focus { outline: none; border: 2px solid black; } ul { position: absolute; top: 50px; left: 10px; list-style: none; margin: 0; padding: 0; width: calc(30vw - 40px); background-color: white; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); border-radius: 10px; } li { text-align: left; padding: 10px 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } li:hover { background-color: #f0f0f0; cursor: pointer; border-radius: 10px; } button { width: 50vw; height: clamp(1rem, 5vh + 1rem, 100rem); border-radius: 50px; background-color: white; font-size: clamp(0.5rem, 0.7vw + 0.5rem, 100rem); display: flex; align-items: center; justify-content: center; position: relative; border-style: none; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); cursor: pointer; } .hidden { display: none; }
