Public
Script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
************************************************************************************************************************
Getting started guide for new local environment
Formatting may be inconsistent from source.
Install InstantSearch
Our InstantSearch library helps provide you with a search experience out of the box. Select your preferred front-end framework to begin designing your search
InstantSearch.js
Create InstantSearch application
Use create-instantsearch-app to create an example search experience with your data
npx create-instantsearch-applatest instantsearch-app \
--name 'instantsearch-app' \
--template 'InstantSearch.js' \
--app-id 'L3YFVOR7YL' \
--api-key '7fb55c7d480ef8b1ad09b55bf3d57afd' \
--index-name 'Test_index' \
--attributes-to-display 'chapterTitle' \
--no-interactive
Start your local application
Once your InstantSearch application is done downloading, navigate to the application and run the following command to start it up.
npm start
************************************************************************************************************************
Getting started guide for local environment integration into local app
1.97 KB • 85 extracted lines
Formatting may be inconsistent from source.
Install InstantSearch package
Add our InstantSearch.js npm package to your project.
npm install algoliasearch instantsearch.js instantsearch.css
If you'd like to load InstantSearch using a CDN, see our
documentation
.
Add InstantSearch configuration
Create a search.js file. It will contain configuration for algoliasearch client and InstantSearch.js UI.
import algoliasearch from 'algoliasearch/lite';
import instantsearch from 'instantsearch.js';
import { searchBox, hits, configure } from 'instantsearch.js/es/widgets';
import { getPropertyByPath } from 'instantsearch.js/es/lib/utils';
const searchClient = algoliasearch('L3YFVOR7YL', '7fb55c7d480ef8b1ad09b55bf3d57afd');
const search = instantsearch({
indexName: 'Test_index',
searchClient,
});
search.addWidgets([
searchBox({
container: "#searchbox"
}),
configure({
hitsPerPage: 5
}),
hits({
container: "#hits",
templates: {
item: (hit, { html, components }) => html`
<div>
<div class="hit-chapterTitle">
${components.Highlight({ hit, attribute: "chapterTitle" })}
</div>
</div>
`,
},
}),
]);
export default search;
Add InstantSearch HTML
Add the below code snippet to your project. To explore additional UI widgets, see our
InstantSearch.js widgets.
<div class="ais-InstantSearch">
<div id="searchbox"></div>
<div id="hits"></div>
</div>
Add custom styles
You can add styles if you'd like to customize the look and feel of your InstantSearch experience.
.ais-SearchBox {
margin-bottom: 1em;
}
.ais-InstantSearch {
max-width: 960px;
width: 100%;
display: block;
overflow: hidden;
margin: 0 auto
}
.ais-Hits-item {
margin-left: 0;
width: 100%;
}
.ais-Hits-item img {
margin-right: 1em
}
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
August 26, 2024