Autocomplete Implementation

Hello Algolia Community,

I am trying to implement the autocomplete functionality of the Algolia search into our website and have run into the issue that the value cannot be read. I have followed the instructions on the Autocomplete Tutorial and replaced the “IndexName” and displayKey information with the relevant information that my index includes but, the error still persists. Does anyone know if there are other changes that must be made for the code to work?

Normally there shouldn’t be other changes needed. Did you import the library? Can you make an example on jsFiddle or similar to get us to debug it?

We have imported the library from JsDelivr and also provided it manually through a test domain we own. To show you an example of our code we developed a JS Fiddle page for you.

https://jsfiddle.net/yxhs4wff/

Hey,

I updated your fiddle: https://jsfiddle.net/yxhs4wff/3/

You should use the autocomplete events instead of adding them to the html:

autocomplete(/*...*/).on('focus', active).on('blur', inactive);

Now it sets/clears the placeholder as you expect

I replaced everything with the code that you used and changed out the API Key and Index with my own and it still is not working. I took a screen shot of the error(s) that is displaying in the console and uploaded it here.

Do the imported files have to be in the header? Or can you have them in the footer?

It seems that my Application ID, Search-Only API Key and Index are not working. I placed your exact code without any modifications into my page and it works without any problem but, when I replace the Application ID, Search-Only API Key and Index with my own identification keys I run into errors.

What could cause an Application ID, Search-Only API Key and Index not to work?

Your index needs to also have this data:

{
  "name": "something",
  "team": "something else"
}

And name and team need to be searchableAttributes. Is that not mentioned in that tutorial? If it isn’t then we should fix it :smile:

I do have them listed as searchable attributes.

you must be using different code than I am; In templates:

autocomplete(
  // ...
  {
    templates: {
      suggestion: function(suggestion) {
        return (
          "<span>" +
          suggestion._highlightResult.name.value +
          "</span><span>" +
          suggestion._highlightResult.team.value +
          "</span>"
        );
      }
    }
  }
);

Here the value _highlightResult.name.value is used, which are the name and team attributes in your index, if they’re called different in your index, you should edit it here too.

This is a sample json record template that I am using:


{
  "Model": " ",
  "Model_Name": " ",
  "Description": " ",
  "Category": " ",
  "Image": " ",
  "URL": " ",
  "objectID": " "
}

If I modify the information to reference this would it be _highlightResult.Model.value?

Yep, that’s right. Any attribute in searchable attributes will be in _highlightResult too. You can also add it manually if it’s not searchable by adding the attribute to attributesToHighlight if absolutely needed

It seems to be working now. Thank you.

Yay! Have a nice day!