Using a form within autocomplete results


I already use auto complete for search within the website. I am also building a manual order system, which I use another version of auto complete which is a form to add to cart.

The problem I now have is: now that I have added a couple of inputs (quantity and another) I am unable to use those inputs due to the click event on the input triggering the autocomplete selected functionality.

Can anyone help with this?

I want to be able to click on the input text boxes to change the values without the auto complete closing, and preventing me adding the product.

Hi ben7. Thank you for reaching out.

Can you provide an example to help us understand what you’re trying to accomplish?
Here is sandbox featuring the autocomplete that can serve as a starting point.

Hi Youcef,

I have forked your codepen and added the basic fields etc

So on this - I can click ‘add’ to add my item to my cart (or just post the form in this test case). What I want to be able to do is allow input into the text boxes before clicking ‘add’. The problem is that the click event on the input box is triggering the close of the autocomplete.

Hi ben7. Thank you for taking the time to set up the example.
It managed to make it work by adding this to your code

  .on('autocomplete:selected', function(event) {

I should mention this is not the usual use case for the autocomplete so you might find yourself struggling again later. For your use case, I think you’ll be better off using instantsearch.js

Unfortunately this still does not allow clicking into the input box. All it does on my real project, is change the value in the search box to full item I have clicked on.

Yes. Again, your use case falls outside the scope of the Autocomplete.
I can only recommend to have a look at InstantsearchJS. It is far more flexible. It will better fit your use case.

1 Like

Thank you. I do use instant search elsewhere, so will move across to using that.