diff --git a/scripts/__image_snapshots__/autocomplete.js/favicon.png-snap.png b/scripts/__image_snapshots__/autocomplete.js/favicon.png-snap.png
new file mode 100644
index 000000000..e67e0becc
Binary files /dev/null and b/scripts/__image_snapshots__/autocomplete.js/favicon.png-snap.png differ
diff --git a/scripts/__snapshots__/e2e-templates.test.js.snap b/scripts/__snapshots__/e2e-templates.test.js.snap
index a7fa7e33b..3950ed568 100644
--- a/scripts/__snapshots__/e2e-templates.test.js.snap
+++ b/scripts/__snapshots__/e2e-templates.test.js.snap
@@ -945,6 +945,314 @@ Array [
]
`;
+exports[`Templates Autocomplete.js File content: .editorconfig 1`] = `
+"root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true"
+`;
+
+exports[`Templates Autocomplete.js File content: .eslintignore 1`] = `
+"/node_modules
+/dist
+/.cache"
+`;
+
+exports[`Templates Autocomplete.js File content: .eslintrc.js 1`] = `
+"module.exports = {
+ extends: 'algolia',
+};"
+`;
+
+exports[`Templates Autocomplete.js File content: .gitignore 1`] = `
+"# 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*"
+`;
+
+exports[`Templates Autocomplete.js File content: .prettierrc 1`] = `
+"{
+ \\"singleQuote\\": true,
+ \\"proseWrap\\": \\"never\\",
+ \\"trailingComma\\": \\"es5\\"
+}"
+`;
+
+exports[`Templates Autocomplete.js File content: README.md 1`] = `
+"# autocomplete.js-app
+
+_This project was generated with [create-instantsearch-app](https://github.com/algolia/create-instantsearch-app) by [Algolia](https://algolia.com)._
+
+## 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
+\`\`\`"
+`;
+
+exports[`Templates Autocomplete.js File content: index.html 1`] = `
+"
+
+
+
+
+
+
+
+
+
+
+
+
+
+ autocomplete.js-app
+
+
+
+
+
+
+
+
+
+
+"
+`;
+
+exports[`Templates Autocomplete.js File content: manifest.webmanifest 1`] = `
+"{
+ \\"short_name\\": \\"autocomplete.js-app\\",
+ \\"name\\": \\"autocomplete.js-app 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\\"
+}"
+`;
+
+exports[`Templates Autocomplete.js File content: package.json 1`] = `
+"{
+ \\"name\\": \\"autocomplete.js-app\\",
+ \\"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\\"
+ },
+ \\"dependencies\\": {
+ \\"algoliasearch\\": \\"3.29.0\\",
+ \\"autocomplete.js\\": \\"1.0.0\\"
+ },
+ \\"devDependencies\\": {
+ \\"babel-eslint\\": \\"8.2.5\\",
+ \\"eslint\\": \\"4.19.1\\",
+ \\"eslint-config-algolia\\": \\"13.1.0\\",
+ \\"eslint-config-prettier\\": \\"2.9.0\\",
+ \\"eslint-plugin-import\\": \\"2.13.0\\",
+ \\"eslint-plugin-prettier\\": \\"2.6.1\\",
+ \\"parcel-bundler\\": \\"1.9.4\\",
+ \\"prettier\\": \\"1.13.7\\"
+ }
+}"
+`;
+
+exports[`Templates Autocomplete.js File content: src/app.css 1`] = `
+".header {
+ display: flex;
+ align-items: center;
+ min-height: 50px;
+ padding: 0.5rem 1rem;
+ background-image: linear-gradient(73deg, #3369e7, #1cc7d0);
+ 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;
+}
+
+#searchBox {
+ margin-bottom: 2rem;
+}
+
+.algolia-autocomplete {
+ width: 100%;
+}
+
+.algolia-autocomplete .aa-input,
+.algolia-autocomplete .aa-hint {
+ width: 100%;
+}
+
+.algolia-autocomplete .aa-input {
+ padding: 12px;
+ font: inherit;
+ border-radius: 2px;
+ border: 1px solid rgba(150, 150, 150, 0.16);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
+}
+
+.algolia-autocomplete .aa-hint {
+ color: #999;
+}
+
+.algolia-autocomplete .aa-dropdown-menu {
+ width: 100%;
+ background-color: #fff;
+ border: 1px solid rgba(150, 150, 150, 0.16);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
+}
+
+.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
+ font-weight: bold;
+ cursor: pointer;
+ padding: 12px;
+}
+
+.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
+ font-weight: normal;
+ font-style: normal;
+}
+
+.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
+ background-color: rgba(150, 150, 150, 0.16);
+}"
+`;
+
+exports[`Templates Autocomplete.js File content: src/app.js 1`] = `
+"import algoliasearch from 'algoliasearch';
+import autocomplete from 'autocomplete.js';
+
+const client = algoliasearch('appId', 'apiKey');
+const index = client.initIndex('indexName');
+
+const $hits = document.querySelector('#hits');
+
+autocomplete('#searchBox input[type=search]', { hint: false }, [
+ {
+ source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
+ displayKey: 'mainAttribute',
+ templates: {
+ suggestion(suggestion) {
+ return suggestion._highlightResult.mainAttribute.value;
+ },
+ },
+ },
+]).on('autocomplete:selected', (event, suggestion, dataset) => {
+ console.log({ suggestion, dataset });
+});"
+`;
+
+exports[`Templates Autocomplete.js File content: src/index.css 1`] = `
+"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';
+}"
+`;
+
+exports[`Templates Autocomplete.js Folder structure: contains the right files 1`] = `
+Array [
+ ".editorconfig",
+ ".eslintignore",
+ ".eslintrc.js",
+ ".gitignore",
+ ".prettierrc",
+ "README.md",
+ "favicon.png",
+ "index.html",
+ "manifest.webmanifest",
+ "package.json",
+ "src/app.css",
+ "src/app.js",
+ "src/index.css",
+]
+`;
+
exports[`Templates InstantSearch Android File content: .gitignore 1`] = `
"# IDE Files
*.iml
diff --git a/src/api/__tests__/__snapshots__/index.test.js.snap b/src/api/__tests__/__snapshots__/index.test.js.snap
index 65675d7f5..e44a65501 100644
--- a/src/api/__tests__/__snapshots__/index.test.js.snap
+++ b/src/api/__tests__/__snapshots__/index.test.js.snap
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Options with unknown template throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, InstantSearch Android, InstantSearch iOS, InstantSearch.js, React InstantSearch, React InstantSearch Native, Vue InstantSearch"`;
+exports[`Options with unknown template throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, Autocomplete.js, InstantSearch Android, InstantSearch iOS, InstantSearch.js, React InstantSearch, React InstantSearch Native, Vue InstantSearch"`;
exports[`Options with unvalid name throws 1`] = `
"Could not create a project called \\"[31m./WrongNpmName[39m\\" because of npm naming restrictions.
@@ -8,8 +8,8 @@ exports[`Options with unvalid name throws 1`] = `
- name can only contain URL-friendly characters"
`;
-exports[`Options with wrong template path throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, InstantSearch Android, InstantSearch iOS, InstantSearch.js, React InstantSearch, React InstantSearch Native, Vue InstantSearch"`;
+exports[`Options with wrong template path throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, Autocomplete.js, InstantSearch Android, InstantSearch iOS, InstantSearch.js, React InstantSearch, React InstantSearch Native, Vue InstantSearch"`;
exports[`Options without path throws 1`] = `"The option \`path\` is required."`;
-exports[`Options without template throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, InstantSearch Android, InstantSearch iOS, InstantSearch.js, React InstantSearch, React InstantSearch Native, Vue InstantSearch"`;
+exports[`Options without template throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, Autocomplete.js, InstantSearch Android, InstantSearch iOS, InstantSearch.js, React InstantSearch, React InstantSearch Native, Vue InstantSearch"`;
diff --git a/src/templates/Autocomplete.js/.editorconfig b/src/templates/Autocomplete.js/.editorconfig
new file mode 100644
index 000000000..9d08a1a82
--- /dev/null
+++ b/src/templates/Autocomplete.js/.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/src/templates/Autocomplete.js/.eslintignore b/src/templates/Autocomplete.js/.eslintignore
new file mode 100644
index 000000000..9178ddcd8
--- /dev/null
+++ b/src/templates/Autocomplete.js/.eslintignore
@@ -0,0 +1,3 @@
+/node_modules
+/dist
+/.cache
diff --git a/src/templates/Autocomplete.js/.eslintrc.js b/src/templates/Autocomplete.js/.eslintrc.js
new file mode 100644
index 000000000..67b68ebe5
--- /dev/null
+++ b/src/templates/Autocomplete.js/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+ extends: 'algolia',
+};
diff --git a/src/templates/Autocomplete.js/.gitignore.template b/src/templates/Autocomplete.js/.gitignore.template
new file mode 100644
index 000000000..f0fb0457d
--- /dev/null
+++ b/src/templates/Autocomplete.js/.gitignore.template
@@ -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/src/templates/Autocomplete.js/.prettierrc b/src/templates/Autocomplete.js/.prettierrc
new file mode 100644
index 000000000..833f03b62
--- /dev/null
+++ b/src/templates/Autocomplete.js/.prettierrc
@@ -0,0 +1,5 @@
+{
+ "singleQuote": true,
+ "proseWrap": "never",
+ "trailingComma": "es5"
+}
diff --git a/src/templates/Autocomplete.js/.template.js b/src/templates/Autocomplete.js/.template.js
new file mode 100644
index 000000000..807224b54
--- /dev/null
+++ b/src/templates/Autocomplete.js/.template.js
@@ -0,0 +1,13 @@
+const install = require('../../tasks/node/install');
+const teardown = require('../../tasks/node/teardown');
+
+module.exports = {
+ libraryName: 'autocomplete.js',
+ templateName: 'autocomplete.js',
+ appName: 'autocomplete.js-app',
+ keywords: ['algolia', 'Autocomplete', 'autocomplete.js'],
+ tasks: {
+ install,
+ teardown,
+ },
+};
diff --git a/src/templates/Autocomplete.js/README.md b/src/templates/Autocomplete.js/README.md
new file mode 100644
index 000000000..d50acaa49
--- /dev/null
+++ b/src/templates/Autocomplete.js/README.md
@@ -0,0 +1,19 @@
+# {{name}}
+
+_This project was generated with [create-instantsearch-app](https://github.com/algolia/create-instantsearch-app) by [Algolia](https://algolia.com)._
+
+## 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
+```
diff --git a/src/templates/Autocomplete.js/favicon.png b/src/templates/Autocomplete.js/favicon.png
new file mode 100644
index 000000000..e67e0becc
Binary files /dev/null and b/src/templates/Autocomplete.js/favicon.png differ
diff --git a/src/templates/Autocomplete.js/index.html.hbs b/src/templates/Autocomplete.js/index.html.hbs
new file mode 100644
index 000000000..d05b16aaf
--- /dev/null
+++ b/src/templates/Autocomplete.js/index.html.hbs
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{name}}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/templates/Autocomplete.js/manifest.webmanifest b/src/templates/Autocomplete.js/manifest.webmanifest
new file mode 100644
index 000000000..20ac76f5c
--- /dev/null
+++ b/src/templates/Autocomplete.js/manifest.webmanifest
@@ -0,0 +1,15 @@
+{
+ "short_name": "{{name}}",
+ "name": "{{name}} 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/src/templates/Autocomplete.js/package.json b/src/templates/Autocomplete.js/package.json
new file mode 100644
index 000000000..14e7c8ee4
--- /dev/null
+++ b/src/templates/Autocomplete.js/package.json
@@ -0,0 +1,25 @@
+{
+ "name": "{{name}}",
+ "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"
+ },
+ "dependencies": {
+ "algoliasearch": "3.29.0",
+ "autocomplete.js": "{{libraryVersion}}"
+ },
+ "devDependencies": {
+ "babel-eslint": "8.2.5",
+ "eslint": "4.19.1",
+ "eslint-config-algolia": "13.1.0",
+ "eslint-config-prettier": "2.9.0",
+ "eslint-plugin-import": "2.13.0",
+ "eslint-plugin-prettier": "2.6.1",
+ "parcel-bundler": "1.9.4",
+ "prettier": "1.13.7"
+ }
+}
diff --git a/src/templates/Autocomplete.js/src/app.css b/src/templates/Autocomplete.js/src/app.css
new file mode 100644
index 000000000..604987c87
--- /dev/null
+++ b/src/templates/Autocomplete.js/src/app.css
@@ -0,0 +1,81 @@
+.header {
+ display: flex;
+ align-items: center;
+ min-height: 50px;
+ padding: 0.5rem 1rem;
+ background-image: linear-gradient(73deg, #3369e7, #1cc7d0);
+ 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;
+}
+
+#searchBox {
+ margin-bottom: 2rem;
+}
+
+.algolia-autocomplete {
+ width: 100%;
+}
+
+.algolia-autocomplete .aa-input,
+.algolia-autocomplete .aa-hint {
+ width: 100%;
+}
+
+.algolia-autocomplete .aa-input {
+ padding: 12px;
+ font: inherit;
+ border-radius: 2px;
+ border: 1px solid rgba(150, 150, 150, 0.16);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
+}
+
+.algolia-autocomplete .aa-hint {
+ color: #999;
+}
+
+.algolia-autocomplete .aa-dropdown-menu {
+ width: 100%;
+ background-color: #fff;
+ border: 1px solid rgba(150, 150, 150, 0.16);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
+}
+
+.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
+ font-weight: bold;
+ cursor: pointer;
+ padding: 12px;
+}
+
+.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
+ font-weight: normal;
+ font-style: normal;
+}
+
+.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
+ background-color: rgba(150, 150, 150, 0.16);
+}
diff --git a/src/templates/Autocomplete.js/src/app.js.hbs b/src/templates/Autocomplete.js/src/app.js.hbs
new file mode 100644
index 000000000..9bca5d3aa
--- /dev/null
+++ b/src/templates/Autocomplete.js/src/app.js.hbs
@@ -0,0 +1,25 @@
+import algoliasearch from 'algoliasearch';
+import autocomplete from 'autocomplete.js';
+
+const client = algoliasearch('{{appId}}', '{{apiKey}}');
+const index = client.initIndex('{{indexName}}');
+
+const $hits = document.querySelector('#hits');
+
+autocomplete('#searchBox input[type=search]', { hint: false }, [
+ {
+ source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
+ displayKey: '{{mainAttribute}}',
+ templates: {
+ suggestion(suggestion) {
+ {{#if mainAttribute}}
+ return suggestion._highlightResult.{{mainAttribute}}.value;
+ {{else}}
+ return JSON.stringify(suggestion);
+ {{/if}}
+ },
+ },
+ },
+]).on('autocomplete:selected', (event, suggestion, dataset) => {
+ console.log({ suggestion, dataset });
+});
diff --git a/src/templates/Autocomplete.js/src/index.css b/src/templates/Autocomplete.js/src/index.css
new file mode 100644
index 000000000..12f1b9911
--- /dev/null
+++ b/src/templates/Autocomplete.js/src/index.css
@@ -0,0 +1,10 @@
+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';
+}