docs: add new demo example for highlight menu when searching by word,…

… fix issue #169

Change to be committed:
modified: apiExamples/matchWord.html
modified: apiExamples/matchWord.js
modified: demo/index.html
modified: docs/partials/index.md

apiExamples/matchWord.html

@@ -1,4 +1,4 @@
-<auro-input id="matchWordInput" required>
+<auro-input id="matchWordInput" required oninput="auroMenuMatchWordExample()">
   <span slot="label">Enter a value to match in the menu</span>
 </auro-input>
 <br />

apiExamples/matchWord.js

@@ -4,7 +4,7 @@ function updateMatch() {
   matchWordMenu.matchWord = matchWordInput.value;
 }
 
-export function auroMenuMatchWordExample() {
+function auroMenuMatchWordExample() {
   let matchWordInput = document.querySelector('#matchWordInput');
 
   matchWordInput.addEventListener('keyup', updateMatch);

demo/index.html

@@ -41,14 +41,15 @@
         });
     </script>
     <script type="module" src="../index.js"></script>
-
+    <script type="text/javascript" src="../apiExamples/matchWord.js"></script>
     <script>
       import { registerComponent } from '../index.js';
       registerComponent('custom-menu');
     </script>
 
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="./index.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-input@latest/dist/auro-input__bundled.js" type="module"></script>
     <script>
       initMenuIndexExamples();
     </script>

docs/partials/index.md

@@ -35,6 +35,35 @@ A basic `auro-menu` element with nested `auro-menuoption` elements to generate a
 
 Having a closing statement about your example helps to really complete the thought with your reader.
 
+### Highlight on Option
+
+The `auro-menu` component supports the use of the `matchWord` attribute to highlight string parts of each menuoption that are equal to `matchWord`. The matching algorithm is case insensitive (e.g., `n` matches `N`).
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/matchWord.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+```js
+function updateMatch() {
+  let matchWordMenu = document.querySelector('#matchWordMenu');
+  matchWordMenu.matchWord = matchWordInput.value;
+}
+
+function auroMenuMatchWordExample() {
+  let matchWordInput = document.querySelector('#matchWordInput');
+  matchWordInput.addEventListener('keyup', updateMatch);
+}
+```
+
+  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/matchWord.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+
+</auro-accordion>
+
 ## Recommended Use and Version Control
 
 There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-menu` custom element is defined automatically.