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 !
