Displaying results from array of items in Index with Autocomplete

I’m in the process of creating a replacement for Google Site Search, and I have created a crawling application to grab html content and ship it to an Algolia Index.

Using this dataset I’m trying to use the autocomplete library to create a search field that will autocomplete often used and high ranking queries based on keywords listed for each page.

The keywords are in the index as an array of items:
{ Keywords: ["keyword1", "keyword2", "keyword3", "keyword4", "keyword5", "keyword6"] }

I’m having trouble displaying these keywords individually to the user, the results returned is the whole array as a string.

Also, with hint: true, it is returning the whole array as a string as the suggestion.

Here is the basic autocomplete setup with my index: https://codepen.io/Giovanni-Mattucci/pen/LyjZPQ

Search for “advertising,” right now I am only returning the first result of the array, but the suggested item is the whole array.

How can I split out results returned into individual keyword results, including the search hint?
Does this necessitate a change in the structure of the index? Perhaps a new index?

Thanks for your help in advance :slight_smile:

Hi @mattucci,

First, thank you for creating a codepen example, it really helps a lot.

I’d like to make sure I got what you mean. Do you want

“advertising programs”
“advertising programs in ontario”
“college advertising programs”
“advertising courses”
“advertising jobs”
“advertising salary”

in the white window instead of

“advertising program”
“canador”
“st lawrence”
“st clair”
“conestoga”

Is that right?

1 Like

Yes exactly, also of note, I’m trying to avoid creating a separate index (it’s my last resort).

You’ll notice that I’m running into the problem where “Keywords” are treated like one big string with the result of hint: true.

I can’t figure out using the suggestion template function on how to break apart these items, and return them as individual results. I have to take only the first item for it to display at all: suggestion._highlightResult.Keywords[0].value;

Here is a pic how the data is structured:

I think there is a little confusion here, suggestions displayed in the box here are search results.
Algolia performs search against “advertising” then returns 5 results, which all contain a list of keywords.

I think if you want use keywords in the panel, you’ll have to modify your code to get only 1 results, and put the style inside the suggestion function.

I forked your codepen, I hope it’s clear: https://codepen.io/team/algolia/pen/PmJoJv

In fact “hint” is the autocomplete inside the fields, but suggestions are actual results. We’re aware the wording is a bitvconfusing. :sweat_smile:

1 Like

@julienbourdeau Thanks for the example! This is almost there, splitting up the results was what I wanted, thanks for that :slight_smile:

Now, notice that when you select the autocomplete item, it gives you ALL the keywords from the Keywords property:

How do I avoid this? At this point would looking at a separate index of only keywords be my only option?

Hi Matt,

I looked again at your problem and I think rewritting the template wasn’t the best approach. I think you can alter the data before it’s passed to the template. I made a simple example here: https://codepen.io/team/algolia/pen/dWdZQW
It doesn’t launch a new search tho.

That being said, it want to emphasis that it’s the autocomplete lib wasn’t built for this. We are displaying results, not really suggestions. You can look at our magento integration for instance. It’s using autocomplete to create the window, but as you can see, it displays full results.

It might be easier to build something custom for your needs, maybe using the Algolia JS helper.

Hey @julienbourdeau thanks for the help and example! Rewriting the data before it gets to the template is definitely the way to go, but I wasn’t sure how, but now you’ve shown me. Thanks :slight_smile:

Now, I don’t think the autocomplete library not being made for suggestions is the real problem. I think it’s more how the data is structured in my index that is the problem.

My data is one big array of strings, and autocomplete wasn’t made to handle those individually; so we had to do these work arounds like what was done above to split them up as results, but at a certain point, it might be better to build something custom. But the whole reason of using autocomplete is so that you don’t have to build something custom.

Anyways, I was looking to avoid having a separate index of keywords to act as suggested queries, but it looks like the clear option here; it allows me to use autocomplete’s functionality, while getting my results back as expected.

Example using index with the keywords as each an individual object:

1 Like