algolia · Haroenv · Jul 18, 2025 · Jul 22, 2025
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-20.10.0
+22.12.0
diff --git a/examples/js/autocomplete/.gitignore b/examples/js/autocomplete/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/js/autocomplete/index.html b/examples/js/autocomplete/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Autocomplete</title>
+  </head>
+  <body>
+    <header class="header">
+      <h1 class="header-title">
+        <a href="/">Autocomplete</a>
+      </h1>
+      <p class="header-subtitle">
+        using
+        <a href="https://github.com/algolia/instantsearch">
+          InstantSearch.js
+        </a>
+      </p>
+    </header>
+
+    <div class="container">
+      <div class="search-panel">
+        <div class="search-panel__filters">
+          <div id="brand-list"></div>
+        </div>
+
+        <div class="search-panel__results">
+          <div id="searchbox"></div>
+          <div id="hits"></div>
+          <div id="pagination"></div>
+          <div id="trending"></div>
+        </div>
+      </div>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/js/autocomplete/package.json b/examples/js/autocomplete/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "autocomplete",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "~5.8.3",
+    "vite": "^7.0.4"
+  }
+}
diff --git a/examples/js/autocomplete/public/vite.svg b/examples/js/autocomplete/public/vite.svg
diff --git a/examples/js/autocomplete/src/main.ts b/examples/js/autocomplete/src/main.ts
@@ -0,0 +1,81 @@
+import './style.css';
+
+import { liteClient as algoliasearch } from 'algoliasearch/lite';
+import instantsearch from 'instantsearch.js';
+import { carousel } from 'instantsearch.js/es/templates';
+import {
+  configure,
+  hits,
+  pagination,
+  panel,
+  refinementList,
+  trendingItems,
+  autocomplete,
+} from 'instantsearch.js/es/widgets';
+
+import 'instantsearch.css/themes/satellite.css';
+
+const searchClient = algoliasearch(
+  'latency',
+  '6be0576ff61c053d5f9a3225e2a90f76'
+);
+
+const search = instantsearch({
+  indexName: 'instant_search',
+  searchClient,
+  insights: true,
+});
+
+search.addWidgets([
+  autocomplete({
+    container: '#searchbox',
+  }),
+  hits({
+    container: '#hits',
+    templates: {
+      item: (hit, { html, components }) => html`
+        <article>
+          <h1>
+            <a href="/products.html?pid=${hit.objectID}"
+              >${components.Highlight({ hit, attribute: 'name' })}</a
+            >
+          </h1>
+          <p>${components.Highlight({ hit, attribute: 'description' })}</p>
+          <a href="/products.html?pid=${hit.objectID}">See product</a>
+        </article>
+      `,
+    },
+  }),
+  configure({
+    hitsPerPage: 8,
+  }),
+  panel({
+    templates: { header: 'brand' },
+  })(refinementList)({
+    container: '#brand-list',
+    attribute: 'brand',
+  }),
+  pagination({
+    container: '#pagination',
+  }),
+  trendingItems({
+    container: '#trending',
+    limit: 6,
+    templates: {
+      item: (item, { html }) => html`
+        <div>
+          <article>
+            <div>
+              <img src="${item.image}" />
+              <h2>${item.name}</h2>
+            </div>
+            <a href="/products.html?pid=${item.objectID}">See product</a>
+          </article>
+        </div>
+      `,
+      layout: carousel(),
+    },
+  }),
+]);
+
+search.start();
diff --git a/examples/js/autocomplete/src/style.css b/examples/js/autocomplete/src/style.css
@@ -0,0 +1,168 @@
+body,
+h1 {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  min-height: 50px;
+  padding: 0.5rem 1rem;
+  background-image: linear-gradient(284deg, #fedd4e, #fcb43a);
+  color: #fff;
+  margin-bottom: 1rem;
+}
+
+.header a {
+  color: #fff;
+  text-decoration: none;
+}
+
+.header-title {
+  font-size: 1.2rem;
+  font-weight: normal;
+}
+
+.header-title::after {
+  content: ' ▸ ';
+  padding: 0 0.5rem;
+}
+
+.header-subtitle {
+  font-size: 1.2rem;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.search-panel {
+  display: flex;
+}
+
+.search-panel__filters {
+  flex: 1;
+}
+
+.search-panel__results {
+  flex: 3;
+}
+
+.ais-Highlight-highlighted {
+  color: inherit;
+  font-size: inherit;
+}
+
+#searchbox {
+  margin-bottom: 2rem;
+}
+
+#pagination {
+  margin: 2rem auto;
+  text-align: center;
+}
+
+#related-products,
+.ais-Hits--single {
+  margin-top: 1rem;
+}
+
+.ais-Hits--single article {
+  display: flex;
+  gap: 1rem;
+}
+
+.ais-Hits--single img {
+  width: 150px;
+  height: 150px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.ais-TrendingItems-item,
+.ais-RelatedProducts-item {
+  background: none !important;
+  align-items: stretch !important;
+  padding: 0 !important;
+  box-shadow: none !important;
+}
+
+.ais-TrendingItems-item > div,
+.ais-RelatedProducts-item > div {
+  align-items: start;
+  background: #fff;
+  align-items: center;
+  padding: 1.5rem;
+  display: flex;
+  box-shadow: 0 0 0 1px #23263b0d, 0 1px 3px #23263b26;
+}
+
+.ais-TrendingItems-item img,
+.ais-RelatedProducts-item img {
+  width: 100%;
+  height: 100px;
+  object-fit: contain;
+}
+
+.ais-TrendingItems-item article,
+.ais-RelatedProducts-item article {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: space-between;
+}
+
+.ais-TrendingItems-item h2,
+.ais-RelatedProducts-item h2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.2;
+}
+
+.ais-Carousel-item {
+  padding: 0.5rem !important;
+}
+
+.ais-Carousel-list {
+  margin: -0.5rem !important;
+  grid-auto-columns: calc(22% - 0.5rem) !important;
+}
+
+.ais-Carousel::before,
+.ais-Carousel::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 0.5rem;
+  display: block;
+  background: rgb(255, 255, 255);
+  content: '';
+}
+
+.ais-Carousel::before {
+  left: -0.5rem;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 1) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+}
+
+.ais-Carousel::after {
+  right: -0.5rem;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 1) 100%
+  );
+}
diff --git a/examples/js/autocomplete/src/vite-env.d.ts b/examples/js/autocomplete/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/js/autocomplete/tsconfig.json b/examples/js/autocomplete/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/js/getting-started/src/app.js b/examples/js/getting-started/src/app.js
@@ -7,8 +7,8 @@ import {
   pagination,
   panel,
   refinementList,
-  searchBox,
   trendingItems,
+  autocomplete,
 } from 'instantsearch.js/es/widgets';
 
 import 'instantsearch.css/themes/satellite.css';
@@ -25,7 +25,7 @@ const search = instantsearch({
 });
 
 search.addWidgets([
-  searchBox({
+  autocomplete({
     container: '#searchbox',
   }),
   hits({