Autocomplete: Pressing Enter - block redirect

Open Q&A
1

I want to swap the action URL of a <form> . So if someone accidentally hits “Enter”, it should redirect to another URL. Currently, many people are pressing “Enter” (and not understanding the purpose of Autocomplete). How can I either prevent “Enter” (preventDefault() is not working), or change the action URL on “Enter” click?? ($(‘.myform’.attr(‘action’,newSrc)) is not working!)

	
	autocomplete({
           
			container: cont,
                onSubmit({ state,event }) {
              //NOT Working!
                  event.preventDefault(); 
                 
                  var urlPath= window.location.pathname;
                  window.location.href = `/new/Path/?HM2%5Bquery%5D=${state.query}`
                 
                },
})
2

come on! Doesn’t anyone have an answer to this?

3

If I’m understanding what you’re trying to accomplish, this functionality is included in the autocomplete library. What you’re looking for is getItemUrl

1 Like
4

Hello. Thank you for your response.
That was also one of my thoughts to use this callback(Navigate), but apparently it doesn’t respond. It keeps redirecting.
The autocomplete() works flawlessly, except for the redirection!

autocomplete({


      navigator: {
    navigate({ event }) {
      alert('navigate')
        event.preventDefault();
        return false;
     
    }
  },
5

Any chance I could see the full code in a Codesandbox or equivalent? It’s hard to troubleshoot just these snippets.

1 Like
6

The Searchbox on Top
https://hemden-meister.de/Langarm-Businesshemden?design-test=on&test=on
“2406mode”

7

I still don’t understand why I can’t achieve any effect with ‘Navigate’. It’s not triggered, so I can’t initialize any redirection. What am I doing wrong?


	autocomplete({
              
      navigator: {
    navigate({ event }) {
        event.preventDefault();
        return false;
    }
  },    autoselect: true,
								container: cont,
                onSubmit({ state,event }) {
                 
                  event.preventDefault(); 
                 
                  var urlPath= window.location.pathname;
                  window.location.href = `/test/path/?HM2%5Bquery%5D=${state.query}`