Turning off the AutoSuggestion Box

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://us-autocomplete-pro.api.smarty.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. below is the screen shot:

As you can see, above address shows a blank suggestion box and it does not go away even if that address does not exists.

You can modify your sendLookupRequest like this:

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);

    if (data?.suggestions?.length > 0) {
        //Suggestion exists.
        formatSuggestions(data.suggestions);
     
    } else {
        //Suggestion does not exists hide autocomplete.
        suggestionElement.innerHTML = "";
        suggestionElement.classList.remove("active");
        suggestionElement.classList.add("inactive");
    };



};

this will hide the suggestion box if the address field has invalid entry

The autocomplete feature in Chrome has become more and more customer oriented rather than developer friendly.
There are many tricks on the net to avoid this feature but they work maybe for a while and then they get absorbed by Chrome developers.
The key to this solution is that the content of the autocomplete is used to select which data to show.

This solution is quite difficult to disable and it can be improved using text instead of numbers.
Basically a random string is added to a text in the autocomplete attribute.
I did it with PHP because it's handy, but it can be done in JS in many ways.
Here is the code:

autocomplete="text<?=rand()?>"

This way Chrome looks diligently for something and doesn't find anything, returning an empty list.