Autocomplete Library for Vue

Features

  • Open source, production-ready JavaScript library
  • Works with multiple sources of data
  • Datasources can be static or dynamic
  • Supports promises so that you can fetch sources from any asynchronous API
  • Provides a Templates API to customize the rendering
  • Manages state allowing you to control UI behavior 
  • Includes plugins for query suggestions, related searches, and sending Analytics events

Version

  • Vue (v3) application
  • Works in node and all browsers (including IE11+)

Related Integrations

  • InstantSearch for React, Vue, vanilla 
  • Search, Insights, and Recommend APIs

Key links


Get started

Creating the template

1<template>
2  <div class="app-container">
3    <h1>Vue Application</h1>
4    <div id="autocomplete" />
5  </div>
6</template>

Getting started

1<script>
2import { h, Fragment, render, onMounted } from 'vue';
3import algoliasearch from 'algoliasearch/lite';
4import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js';
5
6import '@algolia/autocomplete-theme-classic';
7
8export default {
9  name: 'App',
10};
11</script>

Mounting the autocomplete

1export default {
2  name: 'App',
3  setup() {
4    onMounted(() => {
5      autocomplete({
6        container: '#autocomplete',
7        openOnFocus: true,
8        getSources({ query }) {
9          return [
10            {
11              sourceId: 'products',
12              getItems() {
13                return getAlgoliaResults({
14                  searchClient,
15                  queries: [
16                    {
17                      indexName: 'instant_search',
18                      query,
19                      params: {
20                        hitsPerPage: 10,
21                        attributesToSnippet: ['name:10', 'description:35'],
22                        snippetEllipsisText: '…',
23                      },
24                    },
25                  ],
26                });
27              },
28              // ...
29            },
30          ];
31        },
32        renderer: {
33          createElement: h,
34          Fragment,
35        },
36        render({ children }, root) {
37          render(children, root);
38        },
39      });
40    });
41  },
42};
43</script>
44;

Built with Vue on Algolia