May 4, 2023
0
Level 3
Querying in the middle of a word with algolia autocomplete
I have the following autocomplete with algolia autocomplete and vue and it works fine. However, when querying it doesn't doesn't query in the middle of a word. How can I achieve that?
<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({
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.