Submit Form Normally When Pressing Enter Button

[smileys53]

Hi @TarekRaafat,

Huge Thanks For This Library.

Is there an option to submit the form normally when pressing "Enter" button? Played for some time with the trigger config but no use.

My use case is to show autocomplete results for input as well as the ability to submit the form on pressing Enter button, more like Google search.

[folknor]

It's very difficult to understand what you're asking for.

First result for me with https://lmgtfy.app/?q=submit+form+on+enter is https://stackoverflow.com/questions/477691/submitting-a-form-by-pressing-enter-without-a-submit-button

Here's a short piece of code that does it. I did not test this.

	document.querySelectorAll("input").forEach(el => {
		el.addEventListener("keydown", ev => {
			if (ev.key === "Enter") {
				el.form.submit()
			}
		})
	})

Or did I misunderstand your question?

Are you asking how to make the form submit when the user hits the Enter key while using keyboard navigation on the autoComplete list?

If so, then you just do it in onSelection, like document.myform.submit().

In any case this is not an issue, it's a question. There's a new github feature called Discussions, look for the tab at the top along with the others.

[smileys53]

Hey @folknor

Autocomplete.js prevents the form from submitting normally by pressing Enter key, what i am looking for is ability to submit the query string normally to a server something like search.php and show results there.

In some cases if we want to display all matched results for the query the better option would be to show all results in a dedicated page, so that’s why i am looking for an option to submit the form by pressing Enter key.

Sorry, My bad, I should have used discussions for this.

Exact functionality can be found here at this website
https://www.rezeem.com

[folknor]

Ah, I see.

Yes, that is because autoComplete.js does preventDefault on the event currently. In the next major version of autoComplete.js it should be easier to prevent this, but for now you need to do something like this, either option 1 or 2:

1. If you want to keep the ability to use the keyboard to navigate the autoComplete.js results

function interceptEnterKey(e) {
	if (e.keyCode === 13 && iWantToRedirectToSearchPHP) {
		return true
	}
	return false
}

let orig = myinput.addEventListener
myinput.addEventListener = function () {
	let f = arguments[1]
	if (arguments[0] === "keydown") {
		arguments[1] = function (e) {
			if (interceptEnterKey(e)) {
				return
			}
			f(e)
		}
	}
	orig.apply(this, arguments)
}

Please note that the above is pseudocode I wrote dry, without testing, without validating syntax, and without really knowing if it works. I think the concept should work.

The reason you need to do this is because autoComplete.js removes and re-adds its event listener every time the result list opens.

2. If you don't care about the user using the keyboard to navigate the autoComplete.js results, I think the following is enough to prevent autoComplete.js from doing doing preventDefault.

new autoComplete({
    resultsList: {
        navigation: function() {}
    }
});

[smileys53]

Thank you @folknor ,

The first option concept and code got me going in the right direction.

[categulario]

I'm facing this issue with version v10.2.6. I'm aware of the submit config option that was added, but it doesn't solve the problem for me because I have two input fields with autocomplete in the same page. Thus enabling submit for one or both of them leads to some strange UI behaviors.

I think having the autocomplete library prevent the default behaviour of <intro> could be divided in the following two cases:

• if the options are being displayed and they are focused (focused to the user perspective) then preventDefault()
• in any other case allow intro to bubble and do whatever we as developers and the user expect it to do.