You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<strong>A JavaScript library that lets you quickly build autocomplete experiences</strong>
5
5
</p>
@@ -8,19 +8,15 @@
8
8
9
9
</div>
10
10
11
-
> 🚧 Autocomplete v1 is in an alpha phase and early feedback is welcome.
12
-
>
13
-
> **If you're looking for Autocomplete v0, which has been the production-ready version for the last years, [head over to the `master` branch](https://github.com/algolia/autocomplete/tree/master).**
14
-
15
11
All you need to get started is:
16
12
17
13
- A container to inject the experience into
18
14
- Data to fill the autocomplete with
19
15
- Any Virtual DOM solution (JavaScript, Preact, React, Vue, etc.)
20
16
21
-
The data that populates the autocomplete results are called [sources](https://autocomplete.algolia.com/docs/sources). You can use whatever you want in your sources: a static set of searches terms, search results from an external source like an [Algolia](<[Algolia](https://www.algolia.com/doc/guides/getting-started/what-is-algolia/)>) index, recent searches, and more.
17
+
The data that populates the autocomplete results are called [sources](https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources). You can use whatever you want in your sources: a static set of searches terms, search results from an external source like an [Algolia](https://www.algolia.com/doc/guides/getting-started/what-is-algolia/) index, recent searches, and more.
22
18
23
-
By configuring just those two required parameters ([`container`](https://autocomplete.algolia.com/docs/autocomplete-js/#container) and [`getSources`](https://autocomplete.algolia.com/docs/autocomplete-js/#getsources)) you can have an interactive autocomplete experience. **The library creates an input and provides the interactivity and accessibility attributes, but you're in full control of the DOM elements to output**.
19
+
By configuring just those two required parameters ([`container`](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete/#param-container) and [`getSources`](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete/#param-getsources)) you can have an interactive autocomplete experience. **The library creates an input and provides the interactivity and accessibility attributes, but you're in full control of the DOM elements to output**.
The recommended way to get started is with the [`autocomplete-js`](https://autocomplete.algolia.com/docs/autocomplete-js) package. It includes everything you need to render a JavaScript autocomplete experience.
36
+
The recommended way to get started is with the [`autocomplete-js`](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js) package. It includes everything you need to render a JavaScript autocomplete experience.
41
37
42
-
Otherwise, you can install the [`autocomplete-core`](https://autocomplete.algolia.com/docs/createAutocomplete) package if you want to [build a renderer](https://autocomplete.algolia.com/docs/creating-a-renderer) from scratch.
38
+
Otherwise, you can install the [`autocomplete-core`](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-core) package if you want to [build a renderer](https://www.algolia.com/doc/ui-libraries/autocomplete/guides/creating-a-renderer) from scratch.
43
39
44
40
All Autocomplete packages are available on the [npm](https://www.npmjs.com) registry.
45
41
46
42
```bash
47
-
yarn add @algolia/autocomplete-js@alpha
43
+
yarn add @algolia/autocomplete-js
48
44
# or
49
-
npm install @algolia/autocomplete-js@alpha
45
+
npm install @algolia/autocomplete-js
50
46
```
51
47
52
48
If you don't use a package manager, you can use the HTML `script` element:
@@ -66,7 +62,7 @@ To get started, you need a container for your autocomplete to go in. If you don'
66
62
<div id="autocomplete"></div>
67
63
```
68
64
69
-
Then, insert your autocomplete into it by calling the [`autocomplete`](autocomplete-js) function and providing the [`container`](autocomplete-js/#container). It can be a [CSS selector](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors) or an [Element](https://developer.mozilla.org/docs/Web/API/HTMLElement).
65
+
Then, insert your autocomplete into it by calling the [`autocomplete`](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete/) function and providing the [`container`](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete/#param-container). It can be a [CSS selector](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors) or an [Element](https://developer.mozilla.org/docs/Web/API/HTMLElement).
70
66
71
67
Make sure to provide a container (e.g., a `div`), not an `input`. Autocomplete generates a fully accessible search box for you.
The [documentation](https://autocomplete.algolia.com) offers a few ways to learn about the Autocomplete library:
82
+
The [documentation](https://www.algolia.com/doc/ui-libraries/autocomplete/introduction/what-is-autocomplete) offers a few ways to learn about the Autocomplete library:
87
83
88
-
- Read the [**Core Concepts**](https://autocomplete.algolia.com/docs/basic-options) to learn more about underlying principles, like [**Sources**](https://autocomplete.algolia.com/docs/sources) and [**State**](https://autocomplete.algolia.com/docs/state).
89
-
- Follow the [**Guides**](https://autocomplete.algolia.com/docs/adding-suggested-searches) to understand how to build common UX patterns.
90
-
- Refer to [**API reference**](https://autocomplete.algolia.com/docs/api) for a comprehensive list of parameters and options.
84
+
- Read the [**Core Concepts**](https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/basic-configuration-options/) to learn more about underlying principles, like [**Sources**](https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/sources/) and [**State**](https://www.algolia.com/doc/ui-libraries/autocomplete/core-concepts/state/).
85
+
- Follow the [**Guides**](https://www.algolia.com/doc/ui-libraries/autocomplete/guides/adding-suggested-searches) to understand how to build common UX patterns.
86
+
- Refer to [**API reference**](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js) for a comprehensive list of parameters and options.
91
87
- Try out the [**Playground**](https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/playground?file=/app.tsx) where you can fork a basic implementation and play around.
92
88
93
-
You can find more on the [documentation](https://autocomplete.algolia.com).
89
+
You can find more on the [documentation](https://www.algolia.com/doc/ui-libraries/autocomplete/introduction/what-is-autocomplete).
94
90
95
91
## Support
96
92
@@ -100,13 +96,13 @@ You can find more on the [documentation](https://autocomplete.algolia.com).
100
96
101
97
| Package | Description | Documentation |
102
98
| --- | --- | --- |
103
-
|[`autocomplete-js`](packages/autocomplete-js)| JavaScript package for Autocomplete |[Documentation](https://autocomplete.algolia.com/docs/autocomplete-js)|
104
-
|[`autocomplete-core`](packages/autocomplete-core)|Core primitives to build an Autocomplete experience |[Documentation](https://autocomplete.algolia.com/docs/createAutocomplete)|
105
-
|[`autocomplete-plugin-recent-searches`](packages/autocomplete-plugin-recent-searches)| A plugin to add recent searches to Algolia Autocomplete |[Documentation](https://autocomplete.algolia.com/docs/createLocalStorageRecentSearchesPlugin)|
106
-
|[`autocomplete-plugin-query-suggestions`](packages/autocomplete-plugin-query-suggestions)| A plugin to add query suggestions to Algolia Autocomplete |[Documentation](https://autocomplete.algolia.com/docs/createQuerySuggestionsPlugin)|
107
-
|[`autocomplete-plugin-algolia-insights`](packages/autocomplete-plugin-algolia-insights)| A plugin to add Algolia Insights to Algolia Autocomplete |[Documentation](https://autocomplete.algolia.com/docs/createAlgoliaInsightsPlugin)|
108
-
|[`autocomplete-preset-algolia`](packages/autocomplete-preset-algolia)| Presets to use Algolia features with Autocomplete |[Documentation](https://autocomplete.algolia.com/docs/getAlgoliaResults)|
109
-
|[`autocomplete-theme-classic`](packages/autocomplete-theme-classic)| Classic theme for Autocomplete |[Documentation](https://autocomplete.algolia.com/docs/autocomplete-theme-classic)|
99
+
|[`autocomplete-js`](packages/autocomplete-js)| JavaScript package for Autocomplete |[Documentation](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js)|
100
+
|[`autocomplete-core`](packages/autocomplete-core)|JavaScript core primitives to build an autocomplete experience |[Documentation](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-core)|
101
+
|[`autocomplete-plugin-recent-searches`](packages/autocomplete-plugin-recent-searches)| A plugin to add recent searches to Autocomplete |[Documentation](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-plugin-recent-searches)|
102
+
|[`autocomplete-plugin-query-suggestions`](packages/autocomplete-plugin-query-suggestions)| A plugin to add query suggestions to Autocomplete |[Documentation](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-plugin-query-suggestions)|
103
+
|[`autocomplete-plugin-algolia-insights`](packages/autocomplete-plugin-algolia-insights)| A plugin to add Algolia Insights to Autocomplete |[Documentation](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-plugin-algolia-insights)|
104
+
|[`autocomplete-preset-algolia`](packages/autocomplete-preset-algolia)| Presets to use Algolia features with Autocomplete |[Documentation](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-preset-algolia)|
105
+
|[`autocomplete-theme-classic`](packages/autocomplete-theme-classic)| Classic theme for Autocomplete |[Documentation](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-theme-classic)|
110
106
111
107
## Showcase
112
108
@@ -116,56 +112,11 @@ See the awesome experiences people built with Autocomplete:
You can [find more sandboxes on CodeSandbox](https://codesandbox.io/search?refinementList%5Bnpm_dependencies.dependency%5D%5B0%5D=%40algolia%2Fautocomplete-core).
119
+
Check out [sandboxes using Autocomplete](https://www.algolia.com/doc/ui-libraries/autocomplete/introduction/sandboxes).
Core primitives for building autocomplete experiences.
3
+
The [`autocomplete-core`](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-core/createAutocomplete) package is the foundation of Autocomplete. It exposes primitives to build an autocomplete experience.
4
+
5
+
You likely don’t need to use this package directly unless you’re building a [renderer](https://www.algolia.com/doc/ui-libraries/autocomplete/guides/creating-a-renderer).
The [`autocomplete-js`](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-js/autocomplete) package is an agnostic virtual DOM renderer. You can use it in JavaScript, Preact, React, or Vue projects.
A plugin to add Algolia Insights to Algolia Autocomplete.
3
+
The Algolia Insights plugin automatically sends click and conversion events to the [Algolia Insights API](https://www.algolia.com/doc/rest-api/insights]) whenever a user interacts with the autocomplete.
A plugin to add Query Suggestions to Algolia Autocomplete.
3
+
The Query Suggestions plugin adds [Query Suggestions](https://www.algolia.com/doc/doc/guides/building-search-ui/ui-and-ux-patterns/query-suggestions/js) to your autocomplete.
The theme is designed as a neutral and clean starter. You can use it as a base and customize it with [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
0 commit comments