May 3, 2023
0
Level 3
How to get unique attributes using algolia autocomplete?
I've got the following code and currently, I'm getting all the location attributes from each model. Therefore ending up with duplicates. How can I get unique locations and their count as well.
<template>
<div class="app-container">
<h1>Vue Application</h1>
<div id="autocomplete" />
</div>
</template>
<script lang="jsx">
import { h, Fragment, render, onMounted } from "vue";
import algoliasearch from "algoliasearch/lite";
import { autocomplete, getAlgoliaResults } from "@algolia/autocomplete-js";
import "@algolia/autocomplete-theme-classic";
export default {
name: "AutoComplete",
setup() {
onMounted(() => {
autocomplete({
onStateChange({ state }) {
console.log(state.query); // Actual value
},
container: "#autocomplete",
getSources({ query, setQuery, refresh }) {
return [
{
sourceId: "properties",
getItems({query}) {
return getAlgoliaResults({
searchClient: algoliasearch(
"5ALV3LSLJ1",
"bde35d15e4037209a089a5731721c6c1"
),
queries: [
{
indexName: "properties",
query,
params: {
hitsPerPage: 5,
},
},
],
});
},
templates: {
item({ item, components }) {
return (
<div className="aa-ItemWrapper">
<div className="aa-ItemContent">
<div className="aa-ItemContentBody">
<div className="aa-ItemContentTitle">
<components.Highlight hit={item} attribute="location" />
</div>
</div>
</div>
</div>
);
},
},
},
];
},
renderer: { createElement: h, Fragment, render },
});
});
},
};
</script>
Please or to participate in this conversation.