How to connect a submit button to work with autocomplete?

[robbiegod]

My form is pretty simply. It is a text input field with autocomplete and a submit button.

As user enters a state in the field and gets some autocomplete suggestions. The user selects a state and then i am taking the value and doing a GET request to an API endpoint and then displaying some results into a table under the search box.

We have to support multiple ways for the user to interact with the search for accessibility reasons.

Without doing anything special, I see that my code works great doing the following:

1. user types into the field and uses the mouse to click a result. The results display below the field and only 1 call to the api occurs.
2. user can type into the field, use the arrows on the keyboard, and then press enter. The results display below the field and only 1 call to the api occurs.
3. user can type into the field, use the arrows on the keyboard and use the mouse to select an option. The results display below the field and only 1 call to the api occurs.
4. User types into the search field and presses enter. This is making double calls to the api and displaying multiple results. This is what i am attempting to fix.

From using autocomplete, i see that I can type in my field and i see a list of results. What if my user doesn't select one of those options and instead opts to click the submit button?

Right now i have this eventListener on the submit button.

moslookup.form_id.addEventListener("submit", (event) => {
        event.preventDefault();
        console.log("form submitted");

        // what i am doing here is getting the term from the input field and then making the call to the api
        // and displaying the results below the table
        
        // Problem is it is making multiple calls to the api and so i am getting multiple results displayed.
        
        // i don't understand what I should do here for when the user just types into the box 
        // OR types in the box and tabs to the submit button and presses enter.
        
        // is there a way for it to make a match even if the user doesn't down arrow to the autosuggestions?



});

I think what i want to do is have everything lead to the "selection" section of the autocomplete config. But, how do i hook into that from the submit button?

Anyway, i noticed all of the demos never include a submit button, so I am wondering how to hook it up?

I would actually love to see you add an advanced example with a submit button.

[codingcarpenter]

I'm not sure how useful this will be for you but here is how I got around this issue.

In my config I set up the results list as so

  resultsList: {
        // Add a no results, result
        element: (list, data) => {
            if (!data.results.length) {
                const message = document.createElement('li');
                message.setAttribute('class', 'no_result');
                message.innerHTML = 'Text Here';
                list.appendChild(message);
            }
            // Set found elements in local storage for use by search button
            localStorage.setItem('sppSearchResults', JSON.stringify(data.results));
        },
        noResults: true
    },

Doing this allowed me access to the returned results in my local storage. This way when the user clicks on the search button I can then loop specific data points in each of those returned results after parsing the JSON. Then show the correct results in my desired search field. Note you need to check for blank search box/empty search data or you end up with some odd results like old searches popping up when the field is submitted.

` if (!searchBox.value || !searchedData.length) {
return;
}
else {
// Push the OMS Numbers into an array
let searchedDataNumbers = [];
for (let data of searchedData) searchedDataNumbers.push(data.value.omsNumber);

    for (let service of services) {
        // Check the OMS Number of each service compared to the searched data
        const product = JSON.parse(service.querySelector('.hidden').innerText);
        if (searchedDataNumbers.includes(product.omsNumber)) {
            service.classList.remove('hidden');
        } else {
            service.classList.add('hidden');
        }
    }
}`