Documentation Index
Fetch the complete documentation index at: https://algolia.com/llms.txt
Use this file to discover all available pages before exploring further.
Autocomplete is also available as an experimental widget in InstantSearch,
making it easier to integrate into your search experience.
For more information,
see the API reference for InstantSearch.js or
React InstantSearch. onMounted
lifecycle hook in the setup function.
This example uses an Algolia index
of ecommerce products as a source.
You could use any other source or sources you like.
Before you begin
The guide assumes that you’re familiar with the basic Autocomplete configuration options
and have an existing Vue 3 app to which you want to add an Autocomplete menu.
Get started
Start by adding a container for your autocomplete menu.
This example adds a div with autocomplete as an id.
<template>
<div class="app-container">
<h1>Vue Application</h1>
<div id="autocomplete" />
</div>
</template>;
algoliasearch package,
autocomplete and
getAlgoliaResults from the
autocomplete-js package.
Finally, it imports autocomplete-theme-classic package for some out of the box styling.
Depending on your desired sources,
you may need to import other packages including plugins.
Include some starter code to insert the autocomplete menu into:
<template>
<div class="app-container">
<h1>Application title</h1>
<div id="autocomplete" />
</div>
</template>
<script>
import { h, Fragment, render, onMounted } from "vue";
import { liteClient as algoliasearch } from "algoliasearch/lite";
import { autocomplete, getAlgoliaResults } from "@algolia/autocomplete-js";
import "@algolia/autocomplete-theme-classic";
export default {
name: "App",
};
</script>
Add an Algolia source
The autocomplete-js
package provides a built-in getAlgoliaResults
function for querying an Algolia index.
It requires an Algolia search client
initialized with an Algolia application ID and API key.
It lets you search into your Algolia index using an array of queries,
which defines one or more queries to send to the index.
For more information how to use the getAlgoliaResults function,
see the Getting Started guide.
You can instantiate and mount your Autocomplete instance in the onMounted
lifecycle hook in the setup function.
Doing so requires passing the renderer and render parameters.
This is because the default Autocomplete implementation uses Preact’s version of createElement,
Fragment and render.
Without providing Vue’s version of these,
the Autocomplete instance won’t render the views properly.
<template>
<div className="container">
<h1>Autocomplete with Vue</h1>
<div id="autocomplete" />
</div>
</template>
<script>
import { h, Fragment, render, onMounted } from "vue";
import { liteClient as algoliasearch } from "algoliasearch/lite";
import { autocomplete, getAlgoliaResults } from "@algolia/autocomplete-js";
import "@algolia/autocomplete-theme-classic";
export default {
name: "App",
setup() {
onMounted(() => {
autocomplete({
container: "#autocomplete",
openOnFocus: true,
getSources({ query }) {
return [
{
sourceId: "products",
getItems() {
return getAlgoliaResults({
searchClient,
queries: [
{
indexName: "instant_search",
params: {
query,
hitsPerPage: 10,
attributesToSnippet: ["name:10", "description:35"],
snippetEllipsisText: "…",
},
},
],
});
},
// ...
},
];
},
renderer: { createElement: h, Fragment, render },
});
});
},
};
</script>
Customize templates
Next, to display the results from Algolia,
you need to define an item template.
<script>
import { h, Fragment, render, onMounted } from "vue";
import { autocomplete } from "@algolia/autocomplete-js";
export default {
name: "App",
setup() {
onMounted(() => {
autocomplete({
// ...
getSources({ query }) {
return [
{
// ...
templates: {
item({ item, components }) {
return (
<div className="aa-ItemWrapper">
<div className="aa-ItemContent">
<div className="aa-ItemIcon">
<img
src={item.image}
alt={item.name}
width="40"
height="40"
/>
</div>
<div className="aa-ItemContentBody">
<div className="aa-ItemContentTitle">
<components.Snippet hit={item} attribute="name" />
</div>
<div className="aa-ItemContentDescription">
<components.Snippet
hit={item}
attribute="description"
/>
</div>
</div>
</div>
</div>
);
},
},
},
];
},
renderer: { createElement: h, Fragment, render },
});
});
},
};
</script>
Further UI customization
If you want to build a custom UI that differs from the autocomplete-js output,
check out the guide on creating a custom renderer.
This guide outlines how to create a custom React renderer,
but the underlying principles are the same for any other frontend framework.
