Autocomplete and Snippet Widget

Good evening,
I managed to implement the snippet widget with instantsearch.

Unfortunately i was not able implement snippets for algolia autocomplete.

it’s possible to do it?

This is my current code:

var a = algoliasearch("*********", "*****************").initIndex("my_index")
autocomplete(".my_div", {
    hint: !1
}, {
    source: autocomplete.sources.hits(a, {
        hitsPerPage: 10
    }),
    displayKey: "",
    templates: {
        suggestion: function(a) {
            return "<article><a href='/" + a.slug + "/'>" + a._highlightResult.plaintext.value + "</a></article>"
        }
    }
})

Hi @giacomosilli,

Unfortunately the snippet functionality is not built into the autocomplete.js library.

You could attempt to use our “autocomplete using InstantSearch” guide and implement snippeting here: https://www.algolia.com/doc/guides/building-search-ui/resources/ui-and-ux-patterns/in-depth/autocomplete/js/#overview

Thanks I found this solution but I want to show the snippets INSIDE the droppdown menu, not in the page below. it’s possible?

Hi @giacomosilli,

As Ajay mentioned, this is not something built in to the Autocomplete, you could possibly make this work by customizing the Autocomplete.

Ok I managed to implement the snippets.

Now by clicking on the result in the dropdown menu, instead of redirecting, takes the set value and writes it to the input.

Currently to redirect I am doing this:

        onSelectChange(value) {
            event.preventDefault();
            window.location='http://domain.com/' + value.query;
        },

Is there a better way?
Thanks
I love algolia :slight_smile:

Hi @giacomosilli
why don’t you just use a regular <a href=".../${value.query}"> in your template ?
If you want, window.location isn’t so bad.

Of course I can use the template, but it doesn’t work, maybe I’m not using it correctly. Currently it is like this:

....
                onChange(value) {
                    onSelectChange({
                        query: value,
                    });
                    refine(value);
                },
                render: {
                    option(item) {
                        return "<a href="+ item.slug +">TEST</a>"
                    },
                },
....

    suggestions.addWidget(autocomplete({
        container: $('#autocomplete'),
        onSelectChange(value) {
            //event.preventDefault();
           // window.location='http://domain.com/' + value.query;
        },
    }));

In this way the redirect is not done, the text is selected and inserted in the input

I wish I could do the opposite. Redirect by clicking on the item in the menudropdown and DO NOT write the text in the input. it’s possible?

Hi @giacomosilli,

To help us debug your autocomplete issue, do you mind adding your code in a codeSandbox environment, so that we can reproduce the issue and see the cause easily?

You can modify this boilerplate sandbox of InstantSearch.js with the autocmplete library: https://codesandbox.io/s/autocomplete-results-page-i18ur. If you can modify the sandbox with the minimum amount of code to reproduce your issue, then we’ll be able to give you a precise solution.

Thanks!

Of course there is no problem, it is very similar to your code. I added a template with a href, but as you can see it doesn’t work.
If you uncomment windows.location in the onSelectChange function it works correctly.

My goal is to make the href work without having to use windows.location and avoid reporting the name of the element I click in the input, I would like it to remain empty

Thanks

Oh I see your problem now, thanks for providing the codesample!
Unfortunately the library you’re using selectrize.js (which is the one we recommend indeed)
does not support links:
There is an issue on this here:

Well it’s not a problem that you suggested this library to me.
I’m ready to try something else.
Is there a way to solve the problem by using autocomplete.js or selectize.js or any other library to have the autocomplete input bar with the snippets and the link on dropdown working?

You can also use the onInitialize event on selectize do redirect on a click:

        onInitialize() {
          this.$dropdown.on('mousedown', 'a', e => {
            document.location = e.currentTarget.href;
          });
        },

But this is very similar to your onSelectChange solution.

I don’t think there is a simple way to change selectize default dehavior here.

Well thank you all for the help.

I solved by removing selectize and autocomplete.
I’m using instantsearch with dropdown menu created from scratch by me.

1 Like

Thanks for letting us know how you resolved this!

1 Like