Merge pull request #82 from MaximeRnR/add-custom-way-to-fetch-results

Allow to specify a different function to fetch results

Author: theinterned

README.md

@@ -81,6 +81,10 @@ As an example:
 - `open` is true when the auto-complete result list is visible
 - `value` is the selected value from the list or the empty string when cleared
 
+## Properties
+
+- `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()`
+
 ## Events
 
 ### Network request lifecycle events

examples/index.html

@@ -13,6 +13,12 @@
       }
     </style>
     <script>
+      var robotsList = `
+            <li role="option" data-autocomplete-value="@hubot">Hubot</li>
+            <li role="option" data-autocomplete-value="@bender">Bender</li>
+            <li role="option" data-autocomplete-value="@bb-8">BB-8</li>
+            <li role="option" data-autocomplete-value="@r2d2" aria-disabled="true">R2-D2 (powered down)</li>
+          `;
       class FakeXMLHttpRequest {
         abort() {
           // Do nothing.
@@ -25,12 +31,7 @@
         }
         send() {
           this.status = 200
-          this.responseText = `
-            <li role="option" data-autocomplete-value="@hubot">Hubot</li>
-            <li role="option" data-autocomplete-value="@bender">Bender</li>
-            <li role="option" data-autocomplete-value="@bb-8">BB-8</li>
-            <li role="option" data-autocomplete-value="@r2d2" aria-disabled="true">R2-D2 (powered down)</li>
-          `
+          this.responseText = robotsList
           setTimeout(this.onload.bind(this), 0)
         }
       }
@@ -83,7 +84,24 @@
       </auto-complete>
       <button type="submit">Save</button>
     </form>
-    <!--<script type="module" src="./dist/bundle.js"></script>-->
+
+    <!-- example with a custom fetching result method -->
+    <form>
+      <label id="custom-fetching-robots-label" for="custom-fetching-robot">Custom Fetching Robots</label>
+      <auto-complete id="custom-fetching-method" src="/demo" for="custom-fetching-items-popup" aria-labelledby="custom-fetching-robots-label" data-autoselect="true">
+        <input name="custom-fetching-robot" type="text" aria-labelledby="custom-fetching-robots-label" autofocus>
+        <ul id="custom-fetching-items-popup"></ul>
+        <div id="custom-fetching-items-popup-feedback" class="sr-only"></div>
+      </auto-complete>
+      <button type="submit">Save</button>
+    </form>
+    <script>
+      window.fetch = () => Promise.resolve(new Response(robotsList));
+      // fetchResult must be a function that return a Promise of string and that accepts as parameters an element and an URL
+      document.querySelector("auto-complete#custom-fetching-method").fetchResult = async (el, url) => (await fetch(url)).text();
+    </script>
+
+<!--    <script type="module" src="./dist/bundle.js"></script>-->
     <script type="module" src="https://unpkg.com/@github/auto-complete-element@latest/dist/bundle.js"></script>
   </body>
 </html>

src/auto-complete-element.ts

@@ -1,5 +1,6 @@
 import Autocomplete from './autocomplete.js'
 import AutocompleteEvent from './auto-complete-event.js'
+import {fragment} from './send.js'
 
 const state = new WeakMap()
 
@@ -54,6 +55,8 @@ export default class AutocompleteElement extends HTMLElement {
     }
   }
 
+  fetchResult = fragment
+
   static get observedAttributes(): string[] {
     return ['open', 'value']
   }

src/autocomplete.ts

@@ -1,7 +1,6 @@
 import type AutocompleteElement from './auto-complete-element'
 import Combobox from '@github/combobox-nav'
 import debounce from './debounce.js'
-import {fragment} from './send.js'
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
@@ -202,7 +201,8 @@ export default class Autocomplete {
     url.search = params.toString()
 
     this.container.dispatchEvent(new CustomEvent('loadstart'))
-    fragment(this.input, url.toString())
+    this.container
+      .fetchResult(this.input, url.toString())
       .then(html => {
         // eslint-disable-next-line github/no-inner-html
         this.results.innerHTML = html

test/test.js

@@ -31,7 +31,6 @@ describe('auto-complete element', function () {
 
       triggerInput(input, 'hub')
       await once(container, 'loadend')
-
       assert.equal(5, popup.children.length)
     })
 
@@ -194,6 +193,22 @@ describe('auto-complete element', function () {
       assert.isTrue(container.open)
       assert.isFalse(popup.hidden)
     })
+
+    it('allows providing a custom fetch method', async () => {
+      const container = document.querySelector('auto-complete')
+      const input = container.querySelector('input')
+      const popup = container.querySelector('#popup')
+
+      container.fetchResult = async () => `
+        <li>Mock Custom Fetch Result 1</li>
+        <li>Mock Custom Fetch Result 2</li>
+      `
+
+      triggerInput(input, 'hub')
+      await once(container, 'loadend')
+      assert.equal(2, popup.children.length)
+      assert.equal(popup.querySelector('li').textContent, 'Mock Custom Fetch Result 1')
+    })
   })
 
   describe('clear button provided', () => {