Skip to content

Commit 83cf377

Browse files
authored
Merge pull request #82 from MaximeRnR/add-custom-way-to-fetch-results
Allow to specify a different function to fetch results
2 parents 106855d + bdf3f47 commit 83cf377

File tree

5 files changed

+50
-10
lines changed

5 files changed

+50
-10
lines changed

README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,10 @@ As an example:
8181
- `open` is true when the auto-complete result list is visible
8282
- `value` is the selected value from the list or the empty string when cleared
8383
84+
## Properties
85+
86+
- `fetchResult` you can override the default method used to query for results by overriding this property: `document.querySelector('auto-complete').fetchResult = async (el, url) => (await fetch(url)).text()`
87+
8488
## Events
8589
8690
### Network request lifecycle events

examples/index.html

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,12 @@
1313
}
1414
</style>
1515
<script>
16+
var robotsList = `
17+
<li role="option" data-autocomplete-value="@hubot">Hubot</li>
18+
<li role="option" data-autocomplete-value="@bender">Bender</li>
19+
<li role="option" data-autocomplete-value="@bb-8">BB-8</li>
20+
<li role="option" data-autocomplete-value="@r2d2" aria-disabled="true">R2-D2 (powered down)</li>
21+
`;
1622
class FakeXMLHttpRequest {
1723
abort() {
1824
// Do nothing.
@@ -25,12 +31,7 @@
2531
}
2632
send() {
2733
this.status = 200
28-
this.responseText = `
29-
<li role="option" data-autocomplete-value="@hubot">Hubot</li>
30-
<li role="option" data-autocomplete-value="@bender">Bender</li>
31-
<li role="option" data-autocomplete-value="@bb-8">BB-8</li>
32-
<li role="option" data-autocomplete-value="@r2d2" aria-disabled="true">R2-D2 (powered down)</li>
33-
`
34+
this.responseText = robotsList
3435
setTimeout(this.onload.bind(this), 0)
3536
}
3637
}
@@ -83,7 +84,24 @@
8384
</auto-complete>
8485
<button type="submit">Save</button>
8586
</form>
86-
<!--<script type="module" src="./dist/bundle.js"></script>-->
87+
88+
<!-- example with a custom fetching result method -->
89+
<form>
90+
<label id="custom-fetching-robots-label" for="custom-fetching-robot">Custom Fetching Robots</label>
91+
<auto-complete id="custom-fetching-method" src="/demo" for="custom-fetching-items-popup" aria-labelledby="custom-fetching-robots-label" data-autoselect="true">
92+
<input name="custom-fetching-robot" type="text" aria-labelledby="custom-fetching-robots-label" autofocus>
93+
<ul id="custom-fetching-items-popup"></ul>
94+
<div id="custom-fetching-items-popup-feedback" class="sr-only"></div>
95+
</auto-complete>
96+
<button type="submit">Save</button>
97+
</form>
98+
<script>
99+
window.fetch = () => Promise.resolve(new Response(robotsList));
100+
// fetchResult must be a function that return a Promise of string and that accepts as parameters an element and an URL
101+
document.querySelector("auto-complete#custom-fetching-method").fetchResult = async (el, url) => (await fetch(url)).text();
102+
</script>
103+
104+
<!-- <script type="module" src="./dist/bundle.js"></script>-->
87105
<script type="module" src="https://unpkg.com/@github/auto-complete-element@latest/dist/bundle.js"></script>
88106
</body>
89107
</html>

src/auto-complete-element.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Autocomplete from './autocomplete.js'
22
import AutocompleteEvent from './auto-complete-event.js'
3+
import {fragment} from './send.js'
34

45
const state = new WeakMap()
56

@@ -54,6 +55,8 @@ export default class AutocompleteElement extends HTMLElement {
5455
}
5556
}
5657

58+
fetchResult = fragment
59+
5760
static get observedAttributes(): string[] {
5861
return ['open', 'value']
5962
}

src/autocomplete.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import type AutocompleteElement from './auto-complete-element'
22
import Combobox from '@github/combobox-nav'
33
import debounce from './debounce.js'
4-
import {fragment} from './send.js'
54

65
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
76
// @ts-ignore
@@ -202,7 +201,8 @@ export default class Autocomplete {
202201
url.search = params.toString()
203202

204203
this.container.dispatchEvent(new CustomEvent('loadstart'))
205-
fragment(this.input, url.toString())
204+
this.container
205+
.fetchResult(this.input, url.toString())
206206
.then(html => {
207207
// eslint-disable-next-line github/no-inner-html
208208
this.results.innerHTML = html

test/test.js

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ describe('auto-complete element', function () {
3131

3232
triggerInput(input, 'hub')
3333
await once(container, 'loadend')
34-
3534
assert.equal(5, popup.children.length)
3635
})
3736

@@ -194,6 +193,22 @@ describe('auto-complete element', function () {
194193
assert.isTrue(container.open)
195194
assert.isFalse(popup.hidden)
196195
})
196+
197+
it('allows providing a custom fetch method', async () => {
198+
const container = document.querySelector('auto-complete')
199+
const input = container.querySelector('input')
200+
const popup = container.querySelector('#popup')
201+
202+
container.fetchResult = async () => `
203+
<li>Mock Custom Fetch Result 1</li>
204+
<li>Mock Custom Fetch Result 2</li>
205+
`
206+
207+
triggerInput(input, 'hub')
208+
await once(container, 'loadend')
209+
assert.equal(2, popup.children.length)
210+
assert.equal(popup.querySelector('li').textContent, 'Mock Custom Fetch Result 1')
211+
})
197212
})
198213

199214
describe('clear button provided', () => {

0 commit comments

Comments
 (0)