Instasearch Autocomplete results not filtering

Hello,

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

notfiltering

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:

<template>

    <div>

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

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

            <ais-autocomplete>

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

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

                    :input-props="{

                        style: 'width: 100%',

                        onInputChange: refine,

                        placeholder: 'Search here…',

                    }"

                    >

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

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

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

                        </template>

                    </vue-autosuggest>

                </template>

            </ais-autocomplete>

            
        </ais-instant-search>

        <ais-instant-search

        :search-client="searchClient"

        index-name="products"

        >

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

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

            <ais-hits>

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

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

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

                </div>

            </ais-hits>

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

        </ais-instant-search>

    </div>

</template>

    

<script>

    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 = selected.item.name;

                }

            },

            indicesToSuggestions(indices) {

                return indices.map(({ hits }) => ({ data: hits }));

            },

        },

    };

</script> 

The code in my home page:

<div id="app">
    <ac-search-box></ac-search-box>
</div>

An extra example of the issue:

Solution:

2 Likes