docs: switch core usage with autocomplete-js (#401)

algolia · Jan 21, 2021 · ea01419 · ea01419
1 parent 7aa1027
commit ea01419
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 18 deletions.
diff --git a/packages/website/docs/context.md b/packages/website/docs/context.md
@@ -16,7 +16,7 @@ Context exposes a `setContext` function, which takes an object and merges it wit
 The following example stores the number of hits from an Algolia response, making it accessible everywhere in your autocomplete.
 
 ```js
-const autocomplete = createAutocomplete({
+autocomplete({
   // ...
   getSources({ query, setContext }) {
     return getAlgoliaResults({

diff --git a/packages/website/docs/keyboard-navigation.md b/packages/website/docs/keyboard-navigation.md
@@ -20,7 +20,7 @@ The Navigator API defines three navigation schemes based on key combinations:
 To activate keyboard navigation, you need to implement a [`getItemUrl`](createAutocomplete#getitemurl) function in each of your [sources](/docs/sources) to provide the URL to navigate to. It tells the Navigator API which link to open on <kbd>Enter</kbd>.
 
 ```js {6-8}
-const autocomplete = createAutocomplete({
+autocomplete({
   // ...
   getSources() {
     return [
@@ -59,8 +59,10 @@ For example, if you're using Autocomplete in a [Gatsby](https://www.gatsbyjs.org
 
 ```js
 import { navigate } from 'gatsby';
+import { autocomplete } from '@algolia/autocomplete-js';
 
-const autocomplete = createAutocomplete({
+autocomplete({
+  // ...
   navigator: {
     navigate({ itemUrl }) {
       navigate(itemUrl);

diff --git a/packages/website/docs/state.md b/packages/website/docs/state.md
@@ -25,7 +25,7 @@ The state is available in all lifecycle hooks so you can customize the behavior.
 You can instantiate an autocomplete with an initial state via the [`initialState`](/docs/autocomplete-js/#initialstate) prop.
 
 ```js
-const autocomplete = createAutocomplete({
+autocomplete({
   // ...
   initialState: {
     // This uses the `search` query parameter as the initial query
@@ -39,7 +39,7 @@ const autocomplete = createAutocomplete({
 State changes occur automatically when a user interacts with the autocomplete (updates the input text, selects an item, etc.). You can react to state changes using the [`onStateChange`](createAutocomplete#onstatechange) lifecycle hook.
 
 ```js
-const autocomplete = createAutocomplete({
+autocomplete({
   // ...
   onStateChange({ state }) {
     console.log(state);
@@ -52,23 +52,35 @@ You can also manually update the state using setters. It's useful to implement c
 For example, let's say you want to let users fill the search input with the value of a suggestion by clicking or tapping it. You can use the [`setQuery`](state#setquery) setter provided by [`getSources`](sources#getsources) to attach an event when clicking the tap-ahead button and manually set the query.
 
 ```js
-const autocomplete = createAutocomplete({
-  getSources({ query, setQuery, refresh }) {
+/** @jsx h */
+import { h } from 'preact';
+import { autocomplete } from '@algolia/autocomplete-js';
+
+autocomplete({
+  // ...
+  getSources({ setQuery, refresh }) {
     return [
       {
         // ...
         templates: {
-          item({ item, root }) {
-            const tapAheadButton = document.createElement('button');
-
-            tapAheadButton.addEventListener('click', (event) => {
-              event.stopPropagation();
-
-              setQuery(item.query);
-              refresh();
-            });
-
-            root.appendChild(tapAheadButton);
+          item({ item }) {
+            return (
+              <div className="aa-ItemContent">
+                <div className="aa-ItemSourceIcon">Icon</div>
+                <div className="aa-ItemTitle">{item.query}</div>
+                <button
+                  className="aa-ItemActionButton"
+                  onClick={(event) => {
+                    event.stopPropagation();
+
+                    setQuery(item.query);
+                    refresh();
+                  }}
+                >
+                  Fill query
+                </button>
+              </div>
+            );
           },
         },
       },