Replicating the Algolia documentation search with Autocomplete with JAVASCRIPT

Open Q&A
#1

I am developing a platform related to the world of open source.

I find your search engine truly fabulous and it is just what I need.

I found this guide

Unfortunately I need to achieve the same result using only Javascript and Html, is it possible?

I already use instantsearch in homepage and autocomplete on other pages successfully with no problems.

Is there a working example?

Best,

#2

Can anyone tell me if it is possible to replicate Algolia documentation search with javascript and html?

#3

Have you seen https://www.algolia.com/blog/ux/replicating-the-algolia-documentation-search-with-autocomplete/?

#4

Hello, thanks for the answer,
unfortunately it is the same link that I mentioned in the first post

#5

That guide uses JS + HTML no? Can you explain how it’s not fitting your use case?

#6

I don’t use modules, import states, or preact or vue / react / yarn / npm / node, none of that.

I only use html and javascript included with script tags

Can I achieve the result of the guide or do I have to implement these tools in some way?

#7

I consider that it is not possible

#8

I’m trying to achieve the same and I’m yet to succeed following the guide in https://www.algolia.com/blog/ux/replicating-the-algolia-documentation-search-with-autocomplete/

after following all the steps, no element is rendered at all and I get the following error on the console

Uncaught Error: Container must be string or HTMLElement. Unable to find #searchbox

#9

can you share your code ?

#10

Here https://codeshare.io/K87beo
tried to follow Getting Started with Autocomplete | Autocomplete | Algolia and I’m doing something wrong still, dk what

#11

EDITED > check next post

#12

I am close to the solution.

There are two things that cannot be solved.

In the example on codesandbox I noticed that two elements in the preview use highlight components but don’t work, items are not highlighted:


            <div className="aa-PreviewTitle">
              <components.Highlight hit={preview} attribute="name" />
            </div>

            <div className="aa-PreviewDescription">
              <components.Highlight hit={preview} attribute="description" />
            </div>

The second problem concerns object manipulation and the highlight component. If the returned item is an object how can I manage the component?

          item({ item, components }) {
            return (
              <div className="aa-QuerySuggestion">
                <components.ReverseHighlight hit={item} attribute="tag_name" />
              </div>
            );
          },

the object is this: tag_name [ "applications", "debian", "debian11" ]

the goal is to print each element of the object and make the highlight component work on them.

@haroen

#13

Are those attributes in atttributesToHighlight?

#14

If you open the codesandbox link you will notice that I am using the example indexes of algolia, i think that the parameters used in the preview have been added in atttributesToHighlight … but I see that they are not highlighted in the preview.

About the second problem;

The problem is that “tag_name” is an object so I get the following error:

Uncaught TypeError: e.highlightedValue.split is not a function

#15

I was able to fix the highlighting in the preview as well.

unfortunately I can’t solve this point, use the tag_name object and highlight it

// tag_name = [ "applications", "debian", "debian11" ]

  item({ item, components }) {
            return (
              <div className="aa-QuerySuggestion">
                <components.ReverseHighlight hit={item} attribute="tag_name" />
              </div>
            );
          },

@haroen

#16

Can any of the staff just tell me if it is possible to fix it or not? If the forum is abandoned is there any other way to contact you?

Thank you

#17

The highlight component expect the path to a specific string, not an array or object. You can map to get each index of the array though: serene-dream-tcvh59 - CodeSandbox

{item.tag_name.map((_, index) => (
  <components.Highlight
    hit={item}
    attribute={['tag_name', index]}
  />
))}

You can contact support@algolia.com

#18

Thanks, I will contact you directly by email if I need help on other aspects.

Your suggestion with map was useful to me, but I still have a problem, the result is the following:

/* tag_name = [ "applications", "debian", "debian11" ] */

             if (typeof item.tag_name === 'object') {
            
              return (
                <div className="aa-QuerySuggestion">
                {item.tag_name.map((_, index) => (
                  <components.Highlight
                    hit={item}
                    attribute={['tag_name', index]}
                  />
                ))}
              </div>
              );

            }

/* Result: applicationsdebiandebian11 */

clearly the goal is to separate each tag and make it clickable, as in your example of the first post

#19

You can add other html around the highlight, for example a button, but ul/li or whatever else you want is also possible

   if (typeof item.tag_name === 'object') {
            
              return (
                <div className="aa-QuerySuggestion">
                {item.tag_name.map((_, index) => (
                  <button><components.Highlight
                    hit={item}
                    attribute={['tag_name', index]}
                  /></button>
                ))}
              </div>
              );

            }
#20

the problem is not solved, the various tags are all on the same button, look at the screen.

Immagine 2022-03-30 173416

the result should be this:

2