Allow a no-results option with role=none

Author: kendallgassner

examples/index.html

@@ -100,9 +100,16 @@
         <div id="custom-fetching-items-popup-feedback" class="sr-only"></div>
       </auto-complete>
       <button type="submit">Save</button>
-    </form>
+    </form> 
     <script>
-      window.fetch = () => Promise.resolve(new Response(robotsList));
+      window.fetch = (url) => {
+        const query = url.split('?q=')[1]
+        console.log(query)
+        if (query === 'none') {
+          return  Promise.resolve(new Response('<li role="none" data-no-result-found="true">No results found!</li>'))
+        }
+        return 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>
@@ -119,7 +126,8 @@
       <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="./dist/bundle.js"></script>
+        <!-- <script type="module" src="https://unpkg.com/@github/auto-complete-element@latest/dist/bundle.js"></script> -->
   </body>
 </html>
+ 

src/autocomplete.ts

@@ -209,7 +209,9 @@ export default class Autocomplete {
         this.identifyOptions()
         this.combobox.indicateDefaultOption()
         const allNewOptions = this.results.querySelectorAll('[role="option"]')
-        const hasResults = !!allNewOptions.length
+
+        const hasResults =
+          !!allNewOptions.length || !!this.results.querySelectorAll('[data-no-result-found="true"]').length
         const numOptions = allNewOptions.length
 
         const [firstOption] = allNewOptions