How to submit selected autocomplete suggestion?

[chrisbartley]

First, I love this plugin, thank you! It's working great for me, except I haven't been able to figure out how to capture the selected item in the list of autocomplete suggestions for form submission. I'm using Bootstrap 4.1 and jQuery 3.3.1. Here's a fiddle:

https://jsfiddle.net/chrisbartley/t192eb6r/19/

If you start typing "goo" in the input, you'll get the 4 autocomplete suggestions. Then hit the down arrow to select any of the items in the popup, then hit RETURN to select it and submit the form. But, as you see in the window that opens, the form submits to https://example.com/?q=goo. How do I get it to submit the selected item in the popup menu instead of only what was actually typed ("goo" in this case)?

Perhaps more to the point, I'm not aware of an event I can listen for which would allow me to determine selected autocomplete item. Does one exist?

[xcash]

Hi @chrisbartley and thank you. :)
Looking at your fiddle, it seems indeed a bug. Because it's an input text field and not a select it submits the entered text before the actual select event is fired.
I will try to figure it out. :)

Regarding your second question, that will indeed be a workaround.
Here you can find the events fired by Autocomplete.

You need to stop the automatic submit of the form and then act accordingly (i.e. submitting the form manually) like in this modified version of your fiddle.

https://jsfiddle.net/f0m6bctr/9/

Let me know if it works. I will create another issue to investigate on this bug.

[chrisbartley]

Thanks for the quick reply and for looking in to this. I did try a little bit with the events and disabling auto submit of the form, but without success. But maybe I was just doing something dumb and/or overlooking something obvious. I'll have another look and provide an update here. Thanks!

[xcash]

@chrisbartley here you'll find your example modified to submit the form intercepting the select event.

https://jsfiddle.net/6a48wdq1/1/

Let me know :)

[chrisbartley]

That does work for submitting selected popup item, thank you. However, I think maybe the trouble I had before was also allowing the user to input and submit other text. I'm using this plugin for a search form, so I need to be able to allow the user to type anything they want in the input and either choose something from the autocomplete popup or simply hit ENTER and have it submit the form and search on what they typed. I can't remember the exact problem I was having when I tried this before, but I think I had a function being called onsubmit of the form, but the autocomplete.select event was getting triggered after the submit event. So, if I did something naive like read the value of the input on submit, then I'd just get, say, "goo" instead of "Google Cloud Platform". Maybe I would have had better luck trapping key events and looking for the ENTER key, rather than relying on onsubmit. I'll give it a whirl later, thanks for your help.

[xcash]

@chrisbartley that is what i call free value, you can intrcept it and submit form with the autocomplete.freevalue event.

[chrisbartley]

Thanks. I fiddled around with freevalue a bit before, but could only rarely get it to fire. Does it only get triggered on blur? At least, that's the only way I've found to get it to fire. For example:

https://jsfiddle.net/chrisbartley/5rjqyvnk/9/

If you type in something that won't autocomplete, e.g. foobar, and then hit TAB to move focus away from the input, then the autocomplete.freevalue event gets triggered and submits the form withfoobar as the search term. So that's good. And selecting an item from the popup menu with either mouse or hitting ENTER will also submit the form with the selected menu item. That's good too.
But, just typing in a free value and hitting ENTER does nothing, of course, since we're trapping the submit and returning false. But you can't simply read the value in the input within the submit handler and submit that due to the order of event triggering. That is, autocomplete.select gets fired after submit and thus relies on the submit handler not submitting the form. And so I'm stuck again. :-\

[xcash]

Hi @chrisbartley
I finally managed to streamline the behavior of the events fired in your case.

This is your test case to test it out. :)

https://raw.githack.com/xcash/bootstrap-autocomplete/master/dist/latest/testdata/test-issue-10.html