78 lines
2.1 KiB
Text
78 lines
2.1 KiB
Text
---
|
|
title: Migration Guide
|
|
---
|
|
|
|
## Moving from v2 to v3
|
|
|
|
This article provides a set of guidelines to migrate from v2 to v3.
|
|
|
|
### 1. Update the imported JS & CSS libraries
|
|
|
|
```html
|
|
<!-- Before the closing </head> -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha" />
|
|
|
|
<!-- Before the closing </body> -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
|
|
<script>
|
|
docsearch({
|
|
// See next section for upgrading this JS snippet
|
|
});
|
|
</script>
|
|
```
|
|
|
|
### 2. Update the JS snippet to instantiate DocSearch
|
|
|
|
```html
|
|
<script>
|
|
docsearch({
|
|
container: '<YOUR_CSS_SELECTOR>',
|
|
apiKey: '<YOUR_API_KEY>',
|
|
indexName: '<YOUR_INDEX_NAME>',
|
|
});
|
|
</script>
|
|
```
|
|
|
|
#### Replace `inputSelector` with `container`
|
|
|
|
The `container` argument is a [CSS selector][1] matching the HTML element to
|
|
feature. This element used to be an `<input/>` with DocSearch v2. The JS snippet
|
|
call replaces the first matching element with the DocSearch button. This button
|
|
opens the search modal.
|
|
|
|
For example, the minimalist required structure and imports are:
|
|
|
|
```html
|
|
<html>
|
|
<head>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha"
|
|
/>
|
|
</head>
|
|
<body>
|
|
<div id="docsearch"></div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
|
|
<script>
|
|
docsearch({
|
|
container: '#docsearch',
|
|
apiKey: '<YOUR_API_KEY>',
|
|
indexName: '<YOUR_INDEX_NAME>',
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
#### Replace `algoliaOptions` with `searchParameters`
|
|
|
|
With the v2, if you wanted to forward search parameters to the Algolia API, you
|
|
needed to set the `algoliaOptions` input. It has been replaced with
|
|
`searchParameters`. This argument is [commonly used to filter on specific
|
|
`facetFilters`][2] such as version or language. You [can find out the exhaustive
|
|
list of `searchParameters` availabe in the Algolia documentation][3].
|
|
|
|
[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
|
|
[2]: https://www.algolia.com/doc/api-reference/api-parameters/facetFilters/
|
|
[3]: https://www.algolia.com/doc/api-reference/search-api-parameters/
|