-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
165 lines (162 loc) · 5.23 KB
/
index.html
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<html lang="en">
<head>
<link href="http://fonts.googleapis.com/css?family=Ubuntu|Indie+Flower" rel="stylesheet" type="text/css">
<link href="dist/bonanza.css" rel="stylesheet" type="text/css">
<link href="demo/demo.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="http://nescalante.github.io/bonanza/favicon.ico" type="image/x-icon">
<title>Bonanza</title>
<meta name="viewport" content="width=device-width">
<meta name="description" content="Asynchronous autocomplete with infinite scroll">
<meta name="keywords" content="javascript,autocomplete">
<meta name="author" content="Nicolás Escalante">
<meta charset="utf-8">
</head>
<body>
<div>
<a href="https://github.com/nescalante/bonanza"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/82b228a3648bf44fc1163ef44c62fcc60081495e/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png"></a>
<h2 class="bonanza">Bonanza ⛵️</h2>
<h3>Asynchronous autocomplete with infinite scroll</h3>
<div class="example">
<p>Easy to get started!</p>
<input id="example1" type="text" placeholder="Type a Simpsons child name" />
<p>Source:</p>
<pre>
<code class="javascript">
bonanza(document.querySelector('input'), ['Bart', 'Lisa', 'Maggie']);
</code>
</pre>
</div>
<div class="example">
<p>Use callbacks when you need to bring large data from the server (or wherever)</p>
<input id="example2" type="text" placeholder="Type a character" />
<p>Source:</p>
<pre>
<code class="javascript">
bonanza(document.querySelector('input'), (query, done) => {
request
.get(`/search?term=${query.search}&offset=${query.offset}&limit=${query.limit}`)
.on('response', (res) => {
done(null, res.body);
})
.on('error', (err) => {
done(err);
});
});
</code>
</pre>
<p>Since <span class="bonanza">bonanza</span> works with pagination, you can scroll your results down the list and get them on demand!
</div>
<div class="example">
<p>You can use function templates when working with objects instead of just strings</p>
<input id="example3" type="text" placeholder="Type a character" />
<p>Sample data:</p>
<pre>
<code class="javascript">
[{
"firstName": "Abraham",
"lastName": "Simpson"
}, {
"firstName": "Apu",
"lastName": "Nahasapeemapetilon"
}, {
"firstName": "Artie",
"lastName": "Ziff"
}, ... more items ... ]
</code>
</pre>
<p>Source:</p>
<pre>
<code class="javascript">
const options = { templates: { itemLabel: (obj) => `${obj.firstName} ${obj.lastName}` } };
bonanza(document.querySelector('input'), options, (query, done) => {
request
.get(`/search?term=${query.search}&offset=${query.offset}&limit=${query.limit}`)
.on('response', (res) => {
done(null, res.body);
})
.on('error', (err) => {
done(err);
});
});
</code>
</pre>
<p>Of course you can use your arrow keys to happily navigate through the results!</p>
</div>
<div class="example">
<p>Want to do efficient search? Try to run queries only when you think is needed</p>
<input id="example4" type="text" placeholder="Type a character" />
<p>Source:</p>
<pre>
<code class="javascript">
bonanza(document.querySelector('input'), options, (query, done) => {
if (query.search.length > 3) {
request
.get(`/search?term=${query.search}&offset=${query.offset}&limit=${query.limit}`)
.on('response', (res) => {
done(null, res.body);
})
.on('error', (err) => {
done(err);
});
} else {
done();
}
});
</code>
</pre>
</div>
<div class="example">
<p>Listen to the events to know what happens inside <span class="bonanza">bonanza</span></p>
<input id="example5" type="text" placeholder="Type a character" />
<p>Source:</p>
<pre>
<code class="javascript">
bonanza(document.querySelector('input'), options, (query, done) => {
request
.get(`/search?term=${query.search}&offset=${query.offset}&limit=${query.limit}`)
.on('response', (res) => {
done(null, res.body);
})
.on('error', (err) => {
done(err);
});
})
.on('change', (item) => {
alert(JSON.stringify(item));
});
</code>
</pre>
</div>
<div class="example">
<p>Even more! you can set items as disabled if needed</p>
<input id="example6" type="text" placeholder="Type a character" />
<p>Source:</p>
<pre>
<code class="javascript">
const options = {
templates: {
itemLabel: (obj) => `${obj.firstName} ${obj.lastName}`,
isDisabled: (obj) => obj.isDisabled
}
};
bonanza(document.querySelector('input'), options, (query, done) => {
request
.get(`/search?term=${query.search}&offset=${query.offset}&limit=${query.limit}`)
.on('response', (res) => {
done(null, res.body);
})
.on('error', (err) => {
done(err);
});
});
</code>
</pre>
</div>
<div class="example">
<h3>Get it today from <a href="https://github.com/nescalante/bonanza">GitHub</a>!</h3>
</div>
</div>
<script src="demo/demo.js"></script>
<script src="demo/javascript.js"></script>
</body>
</html>