algolia · shaejaz · Jul 1, 2026 · Jul 1, 2026 · Jul 1, 2026 · Jul 1, 2026
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -73,6 +73,10 @@ jobs:
       - checkout
       - build_project:
           path: 'react-instantsearch/algolia-insights'
+      - build_project:
+          path: 'react-instantsearch/autocomplete'
+      - build_project:
+          path: 'react-instantsearch/autocomplete-mentions'
       - build_project:
           path: 'react-instantsearch/conditional-debouncing'
       - build_project:
@@ -104,6 +108,10 @@ jobs:
     executor: node14
     steps:
       - checkout
+      - build_project:
+          path: 'instantsearch.js/autocomplete'
+      - build_project:
+          path: 'instantsearch.js/autocomplete-mentions'
       - build_project:
           path: 'instantsearch.js/autocomplete-results-page'
       - build_project:

diff --git a/instantsearch.js/autocomplete-mentions/.editorconfig b/instantsearch.js/autocomplete-mentions/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/instantsearch.js/autocomplete-mentions/.eslintignore b/instantsearch.js/autocomplete-mentions/.eslintignore
@@ -0,0 +1,3 @@
+/node_modules
+/dist
+/.cache
diff --git a/instantsearch.js/autocomplete-mentions/.eslintrc.js b/instantsearch.js/autocomplete-mentions/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: 'algolia',
+};
diff --git a/instantsearch.js/autocomplete-mentions/.gitignore b/instantsearch.js/autocomplete-mentions/.gitignore
@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/dist
+/.cache
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/instantsearch.js/autocomplete-mentions/.prettierrc b/instantsearch.js/autocomplete-mentions/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "proseWrap": "never",
+  "trailingComma": "es5"
+}
diff --git a/instantsearch.js/autocomplete-mentions/README.md b/instantsearch.js/autocomplete-mentions/README.md
@@ -0,0 +1,23 @@
+# autocomplete-mentions
+
+[![Edit autocomplete-mentions](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/instantsearch.js/autocomplete-mentions)
+
+A headless "@" mentions text box built with the `connectAutocomplete` connector: type "@" followed by a few letters to search the `autocomplete_twitter_accounts` index and complete a handle, Twitter-style.
+
+## Get started
+
+To run this project locally, install the dependencies and run the local server:
+
+```sh
+npm install
+npm start
+```
+
+Alternatively, you may use [Yarn](https://http://yarnpkg.com/):
+
+```sh
+yarn
+yarn start
+```
+
+Open http://localhost:3000 to see your app.
diff --git a/instantsearch.js/autocomplete-mentions/favicon.png b/instantsearch.js/autocomplete-mentions/favicon.png
diff --git a/instantsearch.js/autocomplete-mentions/index.html b/instantsearch.js/autocomplete-mentions/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+
+  <link rel="manifest" href="./manifest.webmanifest">
+  <link rel="shortcut icon" href="./favicon.png">
+
+  <link rel="stylesheet" href="./src/index.css">
+  <link rel="stylesheet" href="./src/app.css">
+
+  <title>InstantSearch.js - Autocomplete mentions</title>
+</head>
+
+<body>
+  <main class="page">
+    <h1 class="page-title">Headless mentions</h1>
+    <p class="page-subtitle">
+      A custom text box with "@" mention suggestions, built with the
+      <code>connectAutocomplete</code> connector. Type "@" followed by a few
+      letters.
+    </p>
+
+    <div class="compose">
+      <textarea id="compose" placeholder="What's happening?" maxlength="280"></textarea>
+      <ul id="mentions-panel" hidden></ul>
+    </div>
+  </main>
+
+  <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.104.0"></script>
+  <script src="./src/app.js"></script>
+</body>
+
+</html>
diff --git a/instantsearch.js/autocomplete-mentions/manifest.webmanifest b/instantsearch.js/autocomplete-mentions/manifest.webmanifest
@@ -0,0 +1,15 @@
+{
+  "short_name": "autocomplete-mentions",
+  "name": "autocomplete-mentions Sample",
+  "icons": [
+    {
+      "src": "favicon.png",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/instantsearch.js/autocomplete-mentions/package.json b/instantsearch.js/autocomplete-mentions/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "autocomplete-mentions",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "parcel index.html --port 3000",
+    "build": "parcel build index.html",
+    "lint": "eslint .",
+    "lint:fix": "npm run lint -- --fix"
+  },
+  "devDependencies": {
+    "babel-eslint": "10.0.1",
+    "eslint": "5.5.0",
+    "eslint-config-algolia": "13.3.0",
+    "eslint-config-prettier": "4.1.0",
+    "eslint-plugin-import": "2.17.3",
+    "eslint-plugin-prettier": "3.1.0",
+    "parcel-bundler": "1.12.3",
+    "prettier": "1.19.1"
+  },
+  "resolutions": {
+    "node-releases": "2.0.20",
+    "path-scurry": "1.11.0"
+  }
+}
diff --git a/instantsearch.js/autocomplete-mentions/src/app.css b/instantsearch.js/autocomplete-mentions/src/app.css
@@ -0,0 +1,107 @@
+body {
+  background: #f5f5fa;
+  color: #21243d;
+}
+
+.page {
+  max-width: 560px;
+  margin: 0 auto;
+  padding: 4rem 1.5rem;
+}
+
+.page-title {
+  font-size: 1.25rem;
+  margin: 0 0 0.25rem;
+}
+
+.page-subtitle {
+  margin: 0 0 2rem;
+  color: #5a607f;
+  font-size: 0.9rem;
+}
+
+.compose {
+  position: relative;
+  border-radius: 0.75rem;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(33, 36, 61, 0.1);
+  padding: 1rem;
+}
+
+#compose {
+  width: 100%;
+  height: 7rem;
+  resize: none;
+  border: 0;
+  outline: 0;
+  font: inherit;
+  line-height: 1.5;
+}
+
+#mentions-panel {
+  position: absolute;
+  width: 18rem;
+  max-width: calc(100% - 2rem);
+  margin: 0;
+  padding: 0.25rem;
+  list-style: none;
+  background: #fff;
+  border-radius: 0.5rem;
+  box-shadow: 0 8px 24px rgba(33, 36, 61, 0.18);
+  z-index: 10;
+}
+
+#mentions-panel[hidden] {
+  display: none;
+}
+
+.account-item {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  width: 100%;
+  padding: 0.4rem 0.5rem;
+  border: 0;
+  border-radius: 0.375rem;
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.account-item:hover,
+.account-item:focus {
+  background: #eef0fb;
+}
+
+.account-item img {
+  height: 32px;
+  width: 32px;
+  flex: none;
+  border-radius: 9999px;
+}
+
+.account-name {
+  display: block;
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+
+.account-handle {
+  display: block;
+  color: #5a607f;
+  font-size: 0.8rem;
+}
+
+.account-item mark,
+.account-item em {
+  font-style: normal;
+  background: #fef3c7;
+  border-radius: 2px;
+}
+
+.account-loading {
+  padding: 0.5rem;
+  color: #5a607f;
+  list-style: none;
+}