Add debounceMs example

alphagov · Nov 20, 2023 · 51034f9 · 51034f9
1 parent 32655c7
commit 51034f9
Showing 1 changed file with 21 additions and 0 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -70,6 +70,13 @@ <h3><code>{ minLength: 2 }</code></h3>
       <label for="autocomplete-minLength">Country</label>
       <div id="tt-minLength" class="autocomplete-wrapper"></div>
 
+      <h3><code>{ debounceMs: 250 }</code></h3>
+      <p>
+        This option will prevent displaying suggestions until debounceMs has elapsed
+      </p>
+      <label for="autocomplete-debounceMs">Country</label>
+      <div id="tt-debounceMs" class="autocomplete-wrapper"></div>
+
       <h3><code>{ displayMenu: 'overlay' }</code></h3>
       <p>This option will display the menu as an absolutely positioned overlay.</p>
       <label for="autocomplete-overlay">Country</label>
@@ -452,6 +459,20 @@ <h3>Translating texts</h3>
       })
     </script>
 
+    <script type="text/javascript">
+      element = document.querySelector('#tt-debounceMs')
+      id = 'autocomplete-debounceMs'
+      accessibleAutocomplete({
+        element: element,
+        id: id,
+        source: countries,
+        debounceMs: 250,
+        menuAttributes: {
+          "aria-labelledby": id
+        }
+      })
+    </script>
+
     <script type="text/javascript">
       element = document.querySelector('#tt-autoselect')
       id = 'autocomplete-autoselect'