> ## 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

> Learn how to build an autocomplete search experience with Vue InstantSearch.

export const AcademyLink = ({href, title}) => {
  return <Card horizontal title="Algolia Academy" href={href} icon="square-play">Learn more about: {title}</Card>;
};

**Autocomplete is a ubiquitous part of most search experiences.** Search providers like Google, ecommerce sites like Amazon, and messaging apps like Slack all offer autocomplete experiences on mobile and desktop.

<img src="https://mintcdn.com/algolia/KSYHF7soFPXylOAb/images/autocomplete/autocomplete.jpg?fit=max&auto=format&n=KSYHF7soFPXylOAb&q=85&s=06b7c03aff8a11c10c79cdacf8f7f8a2" alt="Screenshot of a search box with 'laptop' entered, showing autocomplete suggestions and product listings for MacBook models." width="1280" height="720" data-path="images/autocomplete/autocomplete.jpg" />

Algolia provides a full-featured solution to build autocomplete experiences with the [Autocomplete](/doc/ui-libraries/autocomplete/introduction/what-is-autocomplete) open source library. [Autocomplete](/doc/ui-libraries/autocomplete/introduction/what-is-autocomplete) is separate from InstantSearch, and lets you build an accessible, as-you-type autocomplete user interface that you can integrate anywhere on your site or app.

<Columns>
  <Card title="Open CodeSandbox" icon="codesandbox" href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/vue-instantsearch">
    Run and edit the Autocomplete example in CodeSandbox.
  </Card>

  <Card title="Explore source code" icon="github" href="https://github.com/algolia/autocomplete/tree/next/examples/vue-instantsearch">
    Browse the source for the Autocomplete example on GitHub.
  </Card>
</Columns>

## Autocomplete or Vue InstantSearch?

Autocomplete condenses a search experience into a full-featured search box available anywhere on your site.
Beyond search, it lets users discover all kinds of information.
For example, you could display a static link to the checkout page before search results when the cart contains at least one item.
Yet, it doesn't have explicit UI for filters or pagination.
**That's where Vue InstantSearch comes in.**
It provides a [rich library of widgets](/doc/api-reference/widgets/vue) to further refine your search.

**Autocomplete and Vue InstantSearch aren't mutually exclusive.**
They're made to appear at different places in your site, and blend together in the user flow.
You can also use them together in the same user interface for an even richer search experience.

<AcademyLink href="https://academy.algolia.com/training/0199aacb-f234-7820-8b60-825527919a78/overview" title="Building Search Interfaces with UI Libraries" />

## Use Autocomplete with Vue InstantSearch

A common pattern in search is to implement a search box with an autocomplete as a first step of the search experience.
**Adding an autocomplete to a search page lets you enhance the search experience and create a richer, more contextual search.**

You can integrate an existing or a new Vue InstantSearch implementation with Autocomplete to create this kind of experience.
To learn more, see:

* [Integrate Autocomplete with Vue InstantSearch](/doc/ui-libraries/autocomplete/integrations/with-vue-instantsearch)
* [Integrate Autocomplete with Vue](/doc/ui-libraries/autocomplete/integrations/using-vue)