Help needed implementing autosuggest search

We are implementing the Algolia search on an eCommerce site with home decor items. We appreciate your advice on the following issues:

  1. What do we have to change so that when the user clicks on a suggested item in the autocomplete search results list he gets redirected to the product page?
  2. How can we make the search perform like a regular search form when the user clicks on submit?

Here’s how the test search looks now: https://www.retroboutique.ro/_test.php

Thanks for helping out with this!

Hello,

Thank you for reaching out :slightly_smiling_face:
I can see from your source code that you are using autocomplete so:

  1. For the redirection, you can edit the template that you have
suggestion: function(suggestion) {
          return '<span>' +
            suggestion._highlightResult.title.value + '</span><span>' +
            suggestion._highlightResult.category.value + '</span>';
}

You can see here you are returning HTML - with the element - so you could add as well to add a link so that the user would get redirected to the product page.

what do you think ?
For 2. What do you mean by " like a regular search form" ?

Thank you :slight_smile:

Hi,

Super! We’ve solver issue #1 thanks to your help.

For #2: “Regular search form” - the user searches for something, clicks the search button and submits the form (http://prntscr.com/h9tm4t). How can we do that? Smilar to how the search works now on www.retroboutique.ro - if you type something and then hit enter it submits the form to a page. We want to keep that feature alongside the suggestion search from Algolia.

Hi Claudiu,

You will need to add an event listener to the input that listens for the enter key . It would look something like this (note that I haven’t tested this code):

const input = document.getElementById('aa-search-input');

input.addEventListener('keyup', e => {
  const returnKey = 13;
  if(e.which === returnKey) {
    // Submit the form
  }
});

Do you think this would work for what you’re trying to accomplish?

Hi Dustin,

Thanks, now it’s working ok when pressing the ‘enter key’.

Can you please tell us how can we get the same result when the user presses the search icon: https://prnt.sc/hdzkau?
Because users will tend to do that :slight_smile:

Thanks,
Claudiu

You can combine autocomplete(...).on('autocomplete:selected', function() { /* submit */} with document.querySelector('aa-input-icon', function() {/* submit */}

Does that help?

Thanks a lot, it’s working now!

1 Like