|
1 | 1 | <!DOCTYPE html> |
2 | 2 | <html lang="en"> |
3 | | - <head> |
4 | | - <meta charset="utf-8" /> |
5 | | - <!-- |
| 3 | + |
| 4 | +<head> |
| 5 | + <meta charset="utf-8" /> |
| 6 | + <!-- |
6 | 7 | To use this browser build, please change the following stylesheet tag with this CDN |
7 | 8 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/templates/basic_search.css" /> |
8 | 9 | --> |
9 | | - <link rel="stylesheet" href="../../../templates/basic_search.css" /> |
10 | | - </head> |
11 | | - <body> |
| 10 | + <link rel="stylesheet" href="../../../templates/basic_search.css" /> |
| 11 | +</head> |
| 12 | + |
| 13 | +<body> |
12 | 14 | <div class="wrapper"> |
13 | 15 | <div id="searchbox" focus></div> |
14 | 16 | <div id="hits"></div> |
|
17 | 19 | To use this browser build, please change the following script tag with this CDN |
18 | 20 | <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script> |
19 | 21 | --> |
20 | | - <script src="../../../src/index.ts"></script> |
21 | | - <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script> |
22 | | - <script> |
23 | | - // This is due to parcel not accepting globals on html files. |
24 | | - instantMeiliSearch = instantMeiliSearch.instantMeiliSearch; |
25 | | - const search = instantsearch({ |
26 | | - indexName: "steam-video-games", |
27 | | - searchClient: instantMeiliSearch( |
28 | | - 'https://demo-steam.meilisearch.com', |
29 | | - '90b03f9c47d0f321afae5ae4c4e4f184f53372a2953ab77bca679ff447ecc15c', |
30 | | - ) |
31 | | - }); |
32 | | - search.addWidgets([ |
33 | | - instantsearch.widgets.searchBox({ |
34 | | - container: "#searchbox", |
35 | | - placeholder: "Search..", |
36 | | - }), |
37 | | - instantsearch.widgets.configure({ |
38 | | - hitsPerPage: 8, |
39 | | - }), |
40 | | - instantsearch.widgets.hits({ |
41 | | - container: "#hits", |
42 | | - templates: { |
| 22 | + <script src="../../../src/index.ts"></script> |
| 23 | + <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script> |
| 24 | + <script> |
| 25 | + // This is due to parcel not accepting globals on html files. |
| 26 | + instantMeiliSearch = instantMeiliSearch.instantMeiliSearch; |
| 27 | + const search = instantsearch({ |
| 28 | + indexName: "steam-video-games", |
| 29 | + searchClient: instantMeiliSearch( |
| 30 | + "https://demos.meilisearch.com", |
| 31 | + "dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25" |
| 32 | + ) |
| 33 | + }); |
| 34 | + search.addWidgets([ |
| 35 | + instantsearch.widgets.searchBox({ |
| 36 | + container: "#searchbox", |
| 37 | + placeholder: "Search..", |
| 38 | + }), |
| 39 | + instantsearch.widgets.configure({ |
| 40 | + hitsPerPage: 8, |
| 41 | + }), |
| 42 | + instantsearch.widgets.hits({ |
| 43 | + container: "#hits", |
| 44 | + templates: { |
43 | 45 | item: ` |
44 | 46 | <div> |
45 | 47 | <div class="hit-name"> |
46 | 48 | {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}} |
47 | 49 | </div> |
48 | 50 | </div> |
49 | 51 | ` |
50 | | - } |
51 | | - }) |
52 | | - ]); |
53 | | - search.start(); |
54 | | - </script> |
55 | | - </body> |
| 52 | + } |
| 53 | + }) |
| 54 | + ]); |
| 55 | + search.start(); |
| 56 | + </script> |
| 57 | +</body> |
| 58 | + |
56 | 59 | </html> |
0 commit comments