Prevent Autocomplete dropdown closing when clicking certain elements in template

Hello,

I am currently making some changes for a client to the autocomplete dropdown.
Using the magento 1 supplied module.

One want is to add qty + add to Quote (add to cart) option in the results.
So, I have added a qty input box, and the add to quote buttons.

However, my issue is that I cannot figure out how to prevent the dropdown from closing when the qty is selected, so user can effect input.

I have tried the calling .stopPropagation() on a click event attached to the input box, but that does not help.
Been struggling with numerous attempts, but all failed.

Any idea?

This will show the issue:

https://drive.google.com/file/d/0B_q1zcxvNEZUNUZhZmhFWVpoQ2M/view

Note:

I have already dissociated the ‘autocomplete:selected’ event that is attached to the element. This event used to call ‘location.assign(suggestion.url)’ to effect the click of teh suggestion, to load the product page.
This was done to make the other ‘drawing’ button do its work, and not then load the product page (which is handled via a normal a href element in teh suggestion template

Any help/suggestions appreciated

Hello Lucas,

you can try to set autocomplete’s parameter debug to true. That will prevent the menu from closing. Would that work for you?

Hi,

I already have debug set to true. This prevents the drop-down from closing if clicking outside the drop-down element. But not on any button or element I place in the products template.

In this case an input field.

Oh, I see.
Then you can use preventDefault() in the selected event:

.on('autocomplete:selected', function(event, suggestion, dataset) {
    event.preventDefault(); // NOT CLOSING!
    console.log(suggestion, dataset);
});

Let me know how it works for you.

Perfect. And quite obvious. Thank you.

1 Like