May 2, 2023
0
Level 3
How to fill the search input with the suggested query when clicked in Algolia autocomplete form.
I have the below code and when a user types something they get suggestions. How do I feel the input with the suggestion clicked by a user?
<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.