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 exist 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>
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 sendLookupRequest = async (searchValue, selected = "") => {
const params = new URLSearchParams({
key: smartyKey,
search: searchValue,
source: "all",
selected
});
const request = await fetch(
`https://us-autocomplete-pro.api.smarty.com/lookup?${params}`
);
const data = await request.json();
if (data?.suggestions?.length > 0) formatSuggestions(data.suggestions);
};
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 });
});
debugger;
return divElement;
});
suggestionElement.append(...formattedSuggestions);
};
const populateForm = ({ streetLineWithSecondary, city, state, zipcode }) => {
document.getElementById("address").value = streetLineWithSecondary;
document.getElementById("city").value = city;
document.getElementById("state").value = state;
document.getElementById("zipcode").value = zipcode;
};