Skip to content

Commit f5bbf34

Browse files
sarahdayanHaroenv
sarahdayan
and
Haroenv
authored
feat(autocomplete-js): enable HTML templating (#920)
Co-authored-by: Haroen Viaene <[email protected]>
1 parent 4131bd6 commit f5bbf34

22 files changed

+1448
-57
lines changed

‎bundlesize.config.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
},
77
{
88
"path": "packages/autocomplete-js/dist/umd/index.production.js",
9-
"maxSize": "16.75 kB"
9+
"maxSize": "17.5 kB"
1010
},
1111
{
1212
"path": "packages/autocomplete-preset-algolia/dist/umd/index.production.js",

‎examples/html-templates/README.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Autocomplete with HTML templates example
2+
3+
This example shows how to use HTML templates in Autocomplete.
4+
5+
<p align="center"><img src="capture.png?raw=true" alt="A capture of the Autocomplete with HTML templates example" /></p>
6+
7+
## Demo
8+
9+
[Access the demo](https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/html-templates)
10+
11+
## How to run this example locally
12+
13+
### 1. Clone this repository
14+
15+
```sh
16+
git clone [email protected]:algolia/autocomplete.git
17+
```
18+
19+
### 2. Install the dependencies and run the server
20+
21+
```sh
22+
yarn
23+
yarn workspace @algolia/autocomplete-example-html-templates start
24+
```
25+
26+
Alternatively, you may use npm:
27+
28+
```sh
29+
cd examples/html-templates
30+
npm install
31+
npm start
32+
```
33+
34+
Open <http://localhost:1234> to see your app.

‎examples/html-templates/app.js

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js';
2+
import algoliasearch from 'algoliasearch/lite';
3+
4+
import '@algolia/autocomplete-theme-classic';
5+
6+
const appId = 'latency';
7+
const apiKey = '6be0576ff61c053d5f9a3225e2a90f76';
8+
const searchClient = algoliasearch(appId, apiKey);
9+
10+
autocomplete({
11+
container: '#autocomplete',
12+
placeholder: 'Search',
13+
getSources({ query }) {
14+
return [
15+
{
16+
sourceId: 'products',
17+
getItems() {
18+
return getAlgoliaResults({
19+
searchClient,
20+
queries: [
21+
{
22+
indexName: 'instant_search',
23+
query,
24+
},
25+
],
26+
});
27+
},
28+
templates: {
29+
item({ item, components, html }) {
30+
return html`<div class="aa-ItemWrapper">
31+
<div class="aa-ItemContent">
32+
<div
33+
class="aa-ItemIcon aa-ItemIcon--picture aa-ItemIcon--alignTop"
34+
>
35+
<img
36+
src="${item.image}"
37+
alt="${item.name}"
38+
width="40"
39+
height="40"
40+
/>
41+
</div>
42+
43+
<div class="aa-ItemContentBody">
44+
<div class="aa-ItemContentTitle">
45+
${components.Highlight({ hit: item, attribute: 'name' })}
46+
</div>
47+
<div class="aa-ItemContentDescription">
48+
By <strong>${item.brand}</strong> in ${' '}
49+
<strong>${item.categories[0]}</strong>
50+
</div>
51+
</div>
52+
</div>
53+
</div>`;
54+
},
55+
},
56+
},
57+
];
58+
},
59+
render({ children, render, html }, root) {
60+
render(html`<div class="aa-SomeResults">${children}</div>`, root);
61+
},
62+
renderNoResults({ children, render, html }, root) {
63+
render(html`<div class="aa-NoResults">${children}</div>`, root);
64+
},
65+
});

‎examples/html-templates/capture.png

288 KB
Loading

‎examples/html-templates/env.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// Parcel picks the `source` field of the monorepo packages and thus doesn't
2+
// apply the Babel config. We therefore need to manually override the constants
3+
// in the app.
4+
// See https://twitter.com/devongovett/status/1134231234605830144
5+
global.__DEV__ = process.env.NODE_ENV !== 'production';
6+
global.__TEST__ = false;

‎examples/html-templates/favicon.png

43.1 KB
Loading

‎examples/html-templates/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
6+
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
7+
<link rel="stylesheet" href="style.css" />
8+
9+
<title>HTML Templates | Autocomplete</title>
10+
</head>
11+
12+
<body>
13+
<div class="container">
14+
<div id="autocomplete"></div>
15+
</div>
16+
17+
<script src="env.js"></script>
18+
<script src="app.js"></script>
19+
</body>
20+
</html>

‎examples/html-templates/package.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "@algolia/autocomplete-example-html-templates",
3+
"description": "Autocomplete example with HTML templates",
4+
"version": "1.5.7",
5+
"private": true,
6+
"license": "MIT",
7+
"scripts": {
8+
"build": "parcel build index.html",
9+
"start": "parcel index.html"
10+
},
11+
"dependencies": {
12+
"@algolia/autocomplete-js": "1.5.7",
13+
"@algolia/autocomplete-theme-classic": "1.5.7",
14+
"algoliasearch": "4.9.1"
15+
},
16+
"devDependencies": {
17+
"@algolia/client-search": "4.9.1",
18+
"parcel": "2.0.0-beta.2"
19+
},
20+
"keywords": [
21+
"algolia",
22+
"autocomplete",
23+
"javascript"
24+
]
25+
}

‎examples/html-templates/style.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
background-color: rgb(244, 244, 249);
7+
color: rgb(65, 65, 65);
8+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
9+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
10+
sans-serif;
11+
-webkit-font-smoothing: antialiased;
12+
-moz-osx-font-smoothing: grayscale;
13+
padding: 1rem;
14+
}
15+
16+
.container {
17+
margin: 0 auto;
18+
max-width: 640px;
19+
width: 100%;
20+
}

‎packages/autocomplete-js/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@
3434
"@algolia/autocomplete-core": "1.5.7",
3535
"@algolia/autocomplete-preset-algolia": "1.5.7",
3636
"@algolia/autocomplete-shared": "1.5.7",
37-
"preact": "^10.0.0"
37+
"preact": "^10.0.0",
38+
"htm": "^3.0.0"
3839
},
3940
"devDependencies": {
4041
"@algolia/client-search": "4.9.1"

0 commit comments

Comments
 (0)