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;
Get started for freeExplore all developer docs

Built with Vue on Algolia

Frontend Tools
Code samples

Autocomplete with Vue InstantSearch

Typeahead dropdown menu with suggested searches built with Algolia Autocomplete library and React

  • react
  • javascript
  • nodejs