docs(sandbox): add Query Suggestions with categories (#466)

yixuan-wang20 · francoischalifour · web-flow · commit acbaf8fc0203 · 2021-03-18T10:20:45.000+01:00
Co-authored-by: François Chalifour &lt;francois.chalifour@gmail.com&gt;
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -8,6 +8,7 @@
     "/examples/query-suggestions-with-rich-hits",
     "/examples/query-suggestions",
     "/examples/query-suggestions-with-recent-searches",
+    "/examples/query-suggestions-with-categories",
     "/examples/query-suggestions-with-inline-categories",
     "/examples/recently-viewed-items"
   ],
diff --git a/examples/query-suggestions-with-categories/README.md b/examples/query-suggestions-with-categories/README.md
diff --git a/examples/query-suggestions-with-categories/app.tsx b/examples/query-suggestions-with-categories/app.tsx
@@ -0,0 +1,34 @@
+import { autocomplete } from '@algolia/autocomplete-js';
+import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
+import algoliasearch from 'algoliasearch';
+
+import '@algolia/autocomplete-theme-classic';
+
+const appId = 'latency';
+const apiKey = '6be0576ff61c053d5f9a3225e2a90f76';
+const searchClient = algoliasearch(appId, apiKey);
+
+const querySuggestionsPlugin = createQuerySuggestionsPlugin({
+  searchClient,
+  indexName: 'instant_search_demo_query_suggestions',
+  getSearchParams() {
+    return {
+      hitsPerPage: 10,
+    };
+  },
+  categoryAttribute: [
+    'instant_search',
+    'facets',
+    'exact_matches',
+    'categories',
+  ],
+  categoriesPerItem: 1,
+  categoriesLimit: 2,
+});
+
+autocomplete({
+  container: '#autocomplete',
+  placeholder: 'Search',
+  openOnFocus: true,
+  plugins: [querySuggestionsPlugin],
+});
diff --git a/examples/query-suggestions-with-categories/env.ts b/examples/query-suggestions-with-categories/env.ts
@@ -0,0 +1,9 @@
+import { h } from 'preact';
+
+// Parcel picks the `source` field of the monorepo packages and thus doesn't
+// apply the Babel config to replace our `__DEV__` global expression.
+// We therefore need to manually override it in the example app.
+// See https://twitter.com/devongovett/status/1134231234605830144
+(global as any).__DEV__ = process.env.NODE_ENV !== 'production';
+(global as any).__TEST__ = false;
+(global as any).h = h;
diff --git a/examples/query-suggestions-with-categories/favicon.png b/examples/query-suggestions-with-categories/favicon.png
diff --git a/examples/query-suggestions-with-categories/index.html b/examples/query-suggestions-with-categories/index.html
@@ -0,0 +1,20 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
+    <link rel="stylesheet" href="style.css" />
+
+    <title>Autocomplete Query Suggestions with categories</title>
+  </head>
+
+  <body>
+    <div class="container">
+      <div id="autocomplete"></div>
+    </div>
+
+    <script src="env.ts"></script>
+    <script src="app.tsx"></script>
+  </body>
+</html>
diff --git a/examples/query-suggestions-with-categories/package.json b/examples/query-suggestions-with-categories/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "@algolia/query-suggestion-with-categories",
+  "description": "Autocomplete Query Suggestions with categories",
+  "version": "1.0.0-alpha.44",
+  "private": true,
+  "license": "MIT",
+  "main": "index.html",
+  "scripts": {
+    "build": "parcel build index.html",
+    "start": "parcel index.html"
+  },
+  "dependencies": {
+    "@algolia/autocomplete-js": "1.0.0-alpha.44",
+    "@algolia/autocomplete-plugin-query-suggestions": "1.0.0-alpha.44",
+    "@algolia/autocomplete-theme-classic": "1.0.0-alpha.44",
+    "algoliasearch": "4.8.3",
+    "preact": "10.5.7"
+  },
+  "devDependencies": {
+    "parcel-bundler": "1.12.4"
+  },
+  "keywords": [
+    "algolia",
+    "autocomplete",
+    "javascript"
+  ]
+}
diff --git a/examples/query-suggestions-with-categories/style.css b/examples/query-suggestions-with-categories/style.css
@@ -0,0 +1,20 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: rgb(244, 244, 249);
+  color: rgb(65, 65, 65);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  padding: 1rem;
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 640px;
+  width: 100%;
+}
