Simple way to detect if user presses enter on an Autocomplete suggestion?

For the thing I’m building there are three different ways users can prompt a search:

  1. Type in a search term and hit enter (user does not interact with autocomplete menu at all)
  2. Type in a search term, key down to autocomplete suggestion, and hit enter
  3. Type in a search term, use cursor to click on an autocomplete suggestion

For case #1 I’ve got a function called pressEnterKey (which calls my searchAlgolia function). My problem is that in case #2 this function is getting called. So I want to add logic to the pressEnterKey function so that if a user is pressing enter on the autocomplete suggestion, it doesn’t trigger searchAlgolia via pressEnterKey (because I will handle this via .on('autocomplete:selected'...) and don’t want to call the search function twice).

Said another way, I’m trying to figure out a simple way to say:
when user hits enter
IF user is on an autocomplete suggestion do nothing (I will handle this via .on('autocomplete:selected'...)
ELSE run my search function

This is my current attempt. It seems to work, although it feels clunky and has been buggy (although not in a way I can consistently reproduce):

pressEnterKey : function() {
  	$("#aa-search-input").keyup(function(event) {
	    if (event.keyCode === 13) {
	    	if ( $('div.aa-input-container span.aa-suggestions').children().hasClass('aa-cursor') ) {
	    		console.log('algolia will take it from here captain');
	    	} else {
		    	$('#aa-search-input').autocomplete('close');
		  	controller.searchAlgolia();
		  	}
	    };
	});

Codepen here: https://codepen.io/alexhollender/pen/VQLymM

If anyone has ideas for how to do this more cleanly/simply I would be greatly appreciative!

Did you try autocomplete:change? Otherwise I fear we might have a bug there that you worked around nicely, I think it might be related to https://github.com/algolia/places/issues/464 somehow (although it’s the opposite problem as you have)

I don’t see autocomplete:change in the documentation? Were you referring to autocomplete:cursorchanged? Either way your suggestion gave me a new idea.

I’ve tinkered a bit more. Updated CodePen here: https://codepen.io/alexhollender/pen/VQLymM/.

I’m detecting whether the cursor is on an autocomplete suggestion or not using a combination of autocomplete:cursorchanged (indicates they are on) and autocomplete:cursorremoved (indicates they are off), and storing the current state in a global variable (this variable starts out false on pageload, var onSuggestion = false, and then gets updated appropriately).

Then, when a user hits enter (*I switched to listening for keydown, instead of keyup), I check the value of onSuggestion. It feels better than the previous solution, but still doesn’t feel great.

Would love any suggestions!

Hi @alexhollender, what king of search will be triggered afterwards 1. is achieved?

In 2. and 3. it seems like the user found what she was looking for but in 1. what would the UI do then?

Thanks! And yes it seems what you did is the right way for now. We never really thought of the 1. use case. That could be a good addition to the library.

Hey @vvo — so in case #1 I trigger a “traditional” search of my Algolia index, using whatever value is currently in the input field. You can see my project (still in development) here if it helps: https://ingredients-app.firebaseapp.com