Merge pull request #100 from loisolire/allow-empty-query-search

Add `fetch-on-empty` optional attribute

Author: keithamus

examples/index.html

@@ -101,7 +101,19 @@
       document.querySelector("auto-complete#custom-fetching-method").fetchResult = async (el, url) => (await fetch(url)).text();
     </script>
 
+    <form>
+      <label id="fetch-on-empty-robots-label" for="fetch-on-empty-robot">Fetch on empty Robots</label>
+      <!-- To enable fetch on empty use fetch-on-empty attribute -->
+      <auto-complete src="/demo" for="fetch-on-empty-items-popup" aria-labelledby="fetch-on-empty-robots-label" fetch-on-empty>
+        <input name="fetch-on-empty-robot" type="text" aria-labelledby="fetch-on-empty-robots-label" autofocus />
+        <button id="fetch-on-empty-robot-clear">x</button>
+        <ul id="fetch-on-empty-items-popup"></ul>
+        <div id="fetch-on-empty-items-popup-feedback" class="sr-only"></div>
+      </auto-complete>
+      <button type="submit">Save</button>
+    </form>
+
 <!--    <script type="module" src="./dist/bundle.js"></script>-->
-    <script type="module" src="https://unpkg.com/@github/auto-complete-element@latest/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

@@ -55,6 +55,14 @@ export default class AutocompleteElement extends HTMLElement {
     }
   }
 
+  get fetchOnEmpty(): boolean {
+    return this.hasAttribute('fetch-on-empty')
+  }
+
+  set fetchOnEmpty(fetchOnEmpty: boolean) {
+    this.toggleAttribute('fetch-on-empty', fetchOnEmpty)
+  }
+
   fetchResult = fragment
 
   static get observedAttributes(): string[] {

src/autocomplete.ts

@@ -187,7 +187,7 @@ export default class Autocomplete {
 
   fetchResults(): void {
     const query = this.input.value.trim()
-    if (!query) {
+    if (!query && !this.container.fetchOnEmpty) {
       this.container.open = false
       return
     }

test/test.js

@@ -269,6 +269,51 @@ describe('auto-complete element', function () {
       assert.equal(`5 results. first is the top result: Press Enter to activate.`, feedback.innerHTML)
     })
   })
+
+  describe('fetch on empty enabled', () => {
+    let container
+    beforeEach(function () {
+      document.body.innerHTML = `
+        <div id="mocha-fixture">
+          <auto-complete fetch-on-empty src="/moke" for="popup" data-autoselect="true">
+            <input type="text" value="1">
+            <ul id="popup"></ul>
+            <div id="popup-feedback"></div>
+          </auto-complete>
+        </div>
+      `
+      container = document.querySelector('auto-complete')
+      container.fetchResult = async () => `
+        <li>Mock Custom Fetch Result 1</li>
+        <li>Mock Custom Fetch Result 2</li>`
+    })
+
+    it('should fetch result when value is empty', async function () {
+      const input = container.querySelector('input')
+      const popup = container.querySelector(`#popup`)
+      const feedback = container.querySelector(`#popup-feedback`)
+
+      triggerInput(input, '')
+      await once(container, 'loadend')
+
+      assert.equal(2, popup.children.length)
+      assert.equal(popup.querySelector('li').textContent, 'Mock Custom Fetch Result 1')
+      assert.equal(feedback.textContent, '')
+    })
+
+    it('does not fetch result when value is empty, if fetch-on-empty removed', async function () {
+      const input = container.querySelector('input')
+      const popup = container.querySelector(`#popup`)
+      const feedback = container.querySelector(`#popup-feedback`)
+      container.fetchOnEmpty = false
+
+      triggerInput(input, '')
+      await new Promise(resolve => setTimeout(resolve, 100))
+
+      assert.equal(0, popup.children.length)
+      assert.equal(feedback.textContent, '')
+    })
+  })
 })
 
 function waitForElementToChange(el) {