feat(autocomplete): add two complete widget examples#542
Open
shaejaz wants to merge 7 commits into
Open
Conversation
Up to standards ✅🟢 Issues
|
| Metric | Results |
|---|---|
| Complexity | 102 |
| Duplication | 2 |
TIP This summary will be updated as you push new changes.
There was a problem hiding this comment.
Pull request overview
This PR adds two new “advanced” autocomplete code samples (federated two-column autocomplete, and headless “@mentions”) for both React InstantSearch and InstantSearch.js, and wires them into CI so they build alongside existing samples.
Changes:
- Added a React InstantSearch federated autocomplete sample using
EXPERIMENTAL_Autocomplete. - Added a React InstantSearch headless mentions sample using the
useAutocompleteconnector. - Added equivalent InstantSearch.js (vanilla) samples and updated CircleCI to build the new projects.
Reviewed changes
Copilot reviewed 43 out of 51 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| react-instantsearch/autocomplete/yarn.lock | Adds locked dependencies for the new React federated autocomplete sample. |
| react-instantsearch/autocomplete/vite.config.js | Vite dev/build configuration for the new sample. |
| react-instantsearch/autocomplete/src/index.jsx | React entry point mounting the app. |
| react-instantsearch/autocomplete/src/index.css | Base page font + reset styling. |
| react-instantsearch/autocomplete/src/App.jsx | Federated two-column autocomplete example implementation. |
| react-instantsearch/autocomplete/src/App.css | Styling for the federated panel layout, products, and quick-access cards. |
| react-instantsearch/autocomplete/README.md | Usage instructions + sample description. |
| react-instantsearch/autocomplete/package.json | Declares sample deps and Vite scripts. |
| react-instantsearch/autocomplete/index.html | Vite HTML entry with #root mount. |
| react-instantsearch/autocomplete/.gitignore | Ignores node/build artifacts for the sample. |
| react-instantsearch/autocomplete-mentions/yarn.lock | Adds locked dependencies for the React mentions sample. |
| react-instantsearch/autocomplete-mentions/vite.config.js | Vite dev/build configuration for the mentions sample. |
| react-instantsearch/autocomplete-mentions/src/index.jsx | React entry point mounting the mentions app. |
| react-instantsearch/autocomplete-mentions/src/index.css | Base page font + reset styling. |
| react-instantsearch/autocomplete-mentions/src/App.jsx | Headless mentions textarea example using useAutocomplete. |
| react-instantsearch/autocomplete-mentions/src/App.css | Styling for textarea + suggestion panel. |
| react-instantsearch/autocomplete-mentions/README.md | Usage instructions + sample description. |
| react-instantsearch/autocomplete-mentions/package.json | Declares sample deps (incl. textarea-caret) and scripts. |
| react-instantsearch/autocomplete-mentions/index.html | Vite HTML entry with #root mount. |
| react-instantsearch/autocomplete-mentions/.gitignore | Ignores node/build artifacts for the sample. |
| instantsearch.js/autocomplete/src/index.css | Base page font + reset styling (vanilla sample). |
| instantsearch.js/autocomplete/src/app.js | Federated autocomplete widget implementation (InstantSearch.js). |
| instantsearch.js/autocomplete/src/app.css | Styling for federated panel layout + results. |
| instantsearch.js/autocomplete/README.md | Usage instructions + sample description. |
| instantsearch.js/autocomplete/package.json | Parcel-based build/lint scripts for the sample. |
| instantsearch.js/autocomplete/manifest.webmanifest | PWA manifest for the sample. |
| instantsearch.js/autocomplete/index.html | Vanilla HTML page loading Algolia + InstantSearch via CDN. |
| instantsearch.js/autocomplete/.prettierrc | Prettier configuration for the sample. |
| instantsearch.js/autocomplete/.gitignore | Ignores node/build artifacts for the sample. |
| instantsearch.js/autocomplete/.eslintrc.js | ESLint config for the sample. |
| instantsearch.js/autocomplete/.eslintignore | ESLint ignore list for build artifacts. |
| instantsearch.js/autocomplete/.editorconfig | EditorConfig for consistent formatting. |
| instantsearch.js/autocomplete-mentions/src/index.css | Base page font + reset styling (mentions sample). |
| instantsearch.js/autocomplete-mentions/src/app.js | Headless mentions implementation using connectAutocomplete. |
| instantsearch.js/autocomplete-mentions/src/app.css | Styling for textarea + suggestion panel (vanilla). |
| instantsearch.js/autocomplete-mentions/README.md | Usage instructions + sample description. |
| instantsearch.js/autocomplete-mentions/package.json | Parcel-based build/lint scripts for the mentions sample. |
| instantsearch.js/autocomplete-mentions/manifest.webmanifest | PWA manifest for the mentions sample. |
| instantsearch.js/autocomplete-mentions/index.html | Vanilla HTML page for mentions sample loading CDN scripts. |
| instantsearch.js/autocomplete-mentions/.prettierrc | Prettier configuration for the mentions sample. |
| instantsearch.js/autocomplete-mentions/.gitignore | Ignores node/build artifacts for the mentions sample. |
| instantsearch.js/autocomplete-mentions/.eslintrc.js | ESLint config for the mentions sample. |
| instantsearch.js/autocomplete-mentions/.eslintignore | ESLint ignore list for build artifacts. |
| instantsearch.js/autocomplete-mentions/.editorconfig | EditorConfig for consistent formatting. |
| .circleci/config.yml | Adds build steps for the new React and vanilla autocomplete samples. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
shaejaz
requested review from
a team,
FabienMotte,
Haroenv and
afrencalg
and removed request for
a team
Haroenv
reviewed
Jul 3, 2026
Haroenv
left a comment
Haroenv
left a comment
Contributor
There was a problem hiding this comment.
looks good. What prevents the rules from being set?
| @@ -0,0 +1,203 @@ | |||
| /* global instantsearch algoliasearch */ | |||
|
|
|||
| const { connectAutocomplete } = instantsearch.connectors; | |||
Contributor
There was a problem hiding this comment.
this isn't using the autocomplete widget, but I guess that doesn't hurt? I don't think we have many users of this pattern anyway
Comment on lines
+20
to
+22
| // Quick-access cards. In production these come from an Algolia Rule that | ||
| // returns custom JSON on `results.userData`. The public demo index has no such | ||
| // Rule, so this constant stands in for that data. |
Contributor
There was a problem hiding this comment.
why don't you add it to the rules?
| // Quick-access cards. In production these come from an Algolia Rule that | ||
| // returns custom JSON on `results.userData`. The public demo index has no such | ||
| // Rule, so this constant stands in for that data. | ||
| const QUICK_ACCESS = [ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR adds examples for autocomplete widget based on the two advanced examples for the older standalone autocomplete.