How to submit search with external button?

[ArcoMul]

I have a search confirmation button next to my autocomplete input. This buttons should submit the form / confirm the search when being pressed. I tried to do form.submit() on .aa-Form, but that doesn't seem to work. Is there an API method I can use?

My main goal is that the visitor is directed to the right search result page, and that autocomplete-js onSubmit is being called with the proper tracking.

[sarahdayan]

Hey @ArcoMul,

I'm assuming you're using autocomplete-js, not autocomplete-core, is this correct?

I'm not entirely sure what your experience looks like (where the query comes from when you're hitting your external submit button? Why hasn't the form been submitted yet?) but you have access to state update functions on your autocomplete instance that you can use externally.

Feel free to provide a minimal reproduction using this sandbox to make it easier to visualize your expected experience.

[ArcoMul]

Hi @sarahdayan

I'm using autocomplete-js yes. I'm talking about the following use-case:

• User fills in a query in the autocomplete input field
• User clicks on a button next to the autocomplete input field (a 'Search' button)
• When that buttons gets click I want to act as if the input field gets submitted (comparable to as if the enter key is being pressed)

Here is a sandbox showing the use-case: https://codesandbox.io/s/silly-sound-eqkl7?file=/index.html

When the button with id example-search-button gets clicked I want to act as if it triggers a submit on the autocomplete input field.

Is that possible with the current API? I didn't see a way using the state functions.

[sarahdayan]

Hey @ArcoMul,

I believe what's going on is that the HTMLFormElement.submit() doesn't exactly replicate the behavior of submitting via a submit button for example. As the documentation explains:

• No submit event is raised. In particular, the form's onsubmit event handler is not run.
• Constraint validation is not triggered.

In your case, HTMLFormElement.requestSubmit() would be more appropriate, but this is tricky given how the form is mounted and unmounted.

Could you please walk me through the experience you're trying to achieve? There might be easier ways to get there, but for now I'm not sure to understand why you need an external submit button considering the results are updating live.

I've read your step-by-step description, but I'd like to understand what the flow would be like for the user. What happens when they click? What happens on the screen?