Instasearch Autocomplete results not filtering


I’m trying to get some basic auto complete functionality but my implementation is not working as expected.


I want a functionality similar to the one presented to the autocomplete live demo example (using Vue suggestion).

I’m using vue-suggestion too here.

The environment : Laravel (7.x), Vue (2.x), algoliasearch(2.x), vue-autosuggest (2.x).

Vue component code:



        <ais-instant-search :search-client="searchClient" index-name="products">

            <ais-configure :hitsPerPage="5" :restrictSearchableAttributes="['name']"/>


                <template slot-scope="{ currentRefinement, indices, refine }">

                    <vue-autosuggest :suggestions="indicesToSuggestions(indices)" @selected="onSelect"


                        style: 'width: 100%',

                        onInputChange: refine,

                        placeholder: 'Search here…',



                        <template slot-scope="{ suggestion }">

                            <ais-highlight :hit="suggestion.item" attribute="name" v-if="" />

                            <strong>{{ suggestion.item.category }}</strong>










            <!-- setting the query from the first instance on the second instance -->

            <ais-configure :query="query" />


                <div slot="item" slot-scope="{ item }">

                    <ais-highlight :hit="item" attribute="name" v-if="" />

                    <strong>$ {{ item.category }}</strong>



            <!-- <ais-pagination /> -->






    import algoliasearch from 'algoliasearch/lite';

    import { VueAutosuggest } from 'vue-autosuggest';

    export default {

        components: { VueAutosuggest },

        data() {

            return {

            searchClient: algoliasearch(

                '(i used my app id here)',

                '(i used my search key here'


            query: '',



        methods: {

            onSelect(selected) {

                if (selected) {

                    this.query =;



            indicesToSuggestions(indices) {

                return{ hits }) => ({ data: hits }));





The code in my home page:

<div id="app">

An extra example of the issue: