Anjali666

I am using a third party tool that Auto populates the address based on whatever the customer is typing so if the customer is Typing "123 test Street", the suggestion box will show all the addresses that are close to "123 test Street". I just want the suggestion box to close if the address that a customer typed does not exists in the suggestion box so if "123 test Street" does not exits in the suggestion box then the suggestion box should close and let the customer type the address that they want. This is the HTML, I have: <div> <label>Address:</label> <div> <input type="text" id="address" value="" autocomplete="off" /> </div> <div id="suggestionContainer"> <div id="suggestionBox" class="inactive"></div> </div> <label>City:</label> <div><input type="text" id="city" value="" /></div> <label>State:</label> <div><input type="text" id="state" value="" /></div> <label>ZIP Code:</label> <div><input type="text" id="zipcode" value="" /></div> </div> I tried putting autocomplete="off" in the address field, but that did not work. Below is the Javascript that I have: const addressElement = document.getElementById("address"); const suggestionElement = document.getElementById("suggestionBox"); addressElement.addEventListener("keyup", (e) => { const searchValue = e.target.value; suggestionElement.innerHTML = ""; if (!searchValue) { suggestionElement.classList.remove("active"); suggestionElement.classList.add("inactive"); return; } suggestionElement.classList.remove("inactive"); suggestionElement.classList.add("active"); sendLookupRequest(searchValue); }); const request = await fetch( `https://vendorURL.com/lookup?${params}` ); const data = await request.json(); if (data?.suggestions?.length > 0) formatSuggestions(data.suggestions); }; This is the Javascript for formatSuggestions: const formatSuggestions = (suggestions) => { const formattedSuggestions = suggestions.map((suggestion) => { const divElement = document.createElement("div"); const { street_line, city, state, zipcode, secondary, entries } = suggestion; const hasSecondaryData = secondary && entries > 1; divElement.innerText = `${street_line} ${secondary} ${hasSecondaryData ? `(${entries} entries)` : "" } ${city} ${state} ${zipcode}`; divElement.addEventListener("click", async () => { const streetLineWithSecondary = `${street_line} ${secondary}`.trim(); if (hasSecondaryData) { suggestionElement.innerHTML = ""; const selected = `${streetLineWithSecondary} (${entries}) ${city} ${state} ${zipcode}`; await sendLookupRequest(streetLineWithSecondary, selected); } else { suggestionElement.classList.remove("active"); suggestionElement.classList.add("inactive"); } populateForm({ streetLineWithSecondary, city, state, zipcode }); }); return divElement; }); suggestionElement.append(...formattedSuggestions); }; I am very new in Javascript. Any help with this will be highly appreciated. With the above Javascript, the autosuggestion box keep showing up even if the address does not exist in the database. attached is the screen shot: