Issues with multiple attibutes on Autocomplete.js

I followed this tutorial to implement a autocomplete search where it must return three attributes of one indice.

But it do not behave as I expected when I try to retrive more them one atribute.

It works fine with:

{
      source: autocomplete.sources.hits(players, { hitsPerPage: 3 }),
      displayKey: 'name',
      templates: {
        header: '<div class="aa-suggestions-category">Players</div>',
        suggestion({_highlightResult}) {
          return `<span>${_highlightResult.name.value}</span>`;
        }
      }
    },

But if I put a second attibute it starts to delivery poor results

{
      source: autocomplete.sources.hits(players, { hitsPerPage: 3 }),
      displayKey: 'name',
      templates: {
        header: '<div class="aa-suggestions-category">Players</div>',
        suggestion({_highlightResult}) {
          return `<span>${_highlightResult.name.value}</span><span>${_highlightResult.team.value}</span>`;
        }
      }
    },

I can get the “team” values but the search is not as precise as in the first example I start to lost a lot of correct results.

How can I retrieve the “team” values along with the “name” value?

Thanks!

Hi @paulo.gws, would it be possible to create a codesandbox using one of our starter templates?

Can you explain what you mean by you start to lose a lot of correct results? Which results are missing that you would expect?

Are you using the data that was downloaded from the tutorial?

Hi @cindy.cullen thanks for reaching out!

I posted the original code from the Algolia example but I´m using my own data and attributes, they are “title”, “brand” and “category”.

Here I´m using just the attribute “title” and everthing is good:
Screen Shot 2020-09-05 at 23.24.40

Then if I use the second atribute “brand” the results at first look ok, but just until I type the number “5”
Screen Shot 2020-09-05 at 23.20.43

After the numer “5” I get no more results and just a single recomendation.
Screen Shot 2020-09-05 at 23.20.55

It happens in another examples as well, usually hidding usefull results that otherwise are being shown with just one attribute.

Let me know if you need more information, I´m not familiar with the codesandbox but I can take a look on it if it helps

Thanks

Hi @paulo.gws, do you have a link to where this is happening? If not, a codesandbox would be very helpful. The starter templates I referenced above should help you get started.