Suggestions not updating after enter data to the input [VUE / NUXT]

Hello guys,

i’m currently facing an issue, i’m creating a wiki where i list a legal articles, and you can search for any article witthin this search bar using query suggestion but i’m facing an issue :

When i try to add this autocomplete + autosuggest, and when i enter data in the input, no query is made each letter i enter in this input, maybe do you have the answer ? here is my code :

  <template>
<div id="article" :class="article.categories.some((e) => e.name === 'Voyage') ? '' : 'is-not-voyage'">
    <div class="container page">
        <h1 class="fw-semibold fs-big center red">
            <span>Wiki</span><br>
            <span class="heading-category" v-if="categories && categories.find((e) => e.slug === cat)">{{
              categories.find((e) => e.slug === cat).name
            }}</span>
        </h1>
         <div class="column-xs-12 column-sm-12 column-md-10 column-lg-10 center">
              <ais-instant-search
                index-name="WikiPage_prod"
                :search-client="searchClient"
              >

              <ais-index index-name="WikiPage_prod">
                <ais-autocomplete>
                  <template slot-scope="{ currentRefinement, indices, refine }">
                    <vue-autosuggest
                      :suggestions="indicesToSuggestions(indices)"
                      @selected="onSelect"
                      v-model="query"
                      :input-props="{
                        style: 'width: 100%',
                        onInputChange: refine,
                        placeholder: 'Search here…',
                      }"
                    >
                      <template slot-scope="{ suggestion }">
                        <ais-highlight
                          :hit="suggestion.item"
                          attribute="title"
                          v-if="suggestion.item.title"
                        />
                      </template>
                    </vue-autosuggest>
                  </template>
                </ais-autocomplete>
              </ais-index>
            </div>
         </div>
    </div>
</div>

And the script :

export default {
    name: 'ArticleSlug',
    computed: {
        ...mapGetters([ 'article', 'categories' ]),
    },
    data(){
      return({
        searchClient: algoliasearch(
          'XXXX',
          'XXXXX'
        ),
        query: '',
        cat : this.$route.params.slug2
      })
    },
    head(){
        return {
            title: this.article.title,
            meta: [{
                name : this.article.meta_tags[0].name,
                content : this.article.meta_tags[0].description,
            }]
        }
    },
    methods: {
      onSelect(selected) {
        if (selected) {
          this.query = selected.item.title;
        }
      },
      indicesToSuggestions(indices) {
        return indices.map(({ hits }) => ({ data: hits }));
      },
    }
}

Thank you for taking your time to help !

there looks nothing wrong with that script by just reading it, do you have it online in a sandbox like this one? vue-instantsearch-app - CodeSandbox. Please edit it to be near to your implementation where it still shows the issue, thanks!

I only see that you’re putting an ais-index at the root of the application, this isn’t needed, since InstantSearch already makes a root index for you.

Thank you @haroen , i fixed the issue, i removed ais-index and now its working perfectly except one thing :

how can i get suggestions only at tap a letter ? because now the case is that i got suggestions just on click on the searchbar without any letter typed

Hi @ibrahim.menzel,

you can add a condition in the search client to avoid searching for empty query like this: doc-code-samples/Vue InstantSearch/conditional-request at master · algolia/doc-code-samples · GitHub

live example : conditional-request - CodeSandbox

1 Like

You rock thank you so much :slight_smile:

1 Like