Add combobox docs

Author: bendera

src/components/examples/multi-select/ComboboxExample.astro

@@ -2,7 +2,17 @@
 
 ---
 
-<vscode-multi-select filter="startsWith" id="combobox-example" combobox>
+<p>
+  <label for="search-method">Search method:</label>
+  <select name="search-method-selector" id="search-method-selector">
+    <option value="contains">contains</option>
+    <option value="fuzzy">fuzzy</option>
+    <option value="startsWith">startsWith</option>
+    <option value="startsWithPerTerm">startsWithPerTerm</option>
+  </select>
+</p>
+
+<vscode-multi-select id="combobox-example" combobox>
   <vscode-option>Afghanistan</vscode-option>
   <vscode-option>Albania</vscode-option>
   <vscode-option>Algeria</vscode-option>
@@ -199,3 +209,19 @@
   <vscode-option>Zambia</vscode-option>
   <vscode-option>Zimbabwe</vscode-option>
 </vscode-multi-select>
+
+<script>
+  import type { SearchMethod } from "@vscode-elements/elements/dist/includes/vscode-select/types";
+  import type { VscodeMultiSelect } from "@vscode-elements/elements/dist/vscode-multi-select";
+
+  const cb = document.querySelector<VscodeMultiSelect>("#combobox-example");
+  const sl = document.querySelector<HTMLSelectElement>(
+    "#search-method-selector"
+  );
+
+  sl?.addEventListener("change", () => {
+    cb!.filter = sl?.options[sl.selectedIndex].value as SearchMethod;
+  });
+
+  cb!.filter = sl?.options[sl.selectedIndex].value as SearchMethod;
+</script>

src/components/examples/single-select/ComboboxExample.astro

@@ -1,6 +1,18 @@
 ---
+
 ---
-<vscode-single-select filter="startsWithPerTerm" combobox>
+
+<p>
+  <label for="search-method">Search method:</label>
+  <select name="search-method-selector" id="search-method-selector">
+    <option value="contains">contains</option>
+    <option value="fuzzy">fuzzy</option>
+    <option value="startsWith">startsWith</option>
+    <option value="startsWithPerTerm">startsWithPerTerm</option>
+  </select>
+</p>
+
+<vscode-single-select id="combobox-example" combobox>
   <vscode-option>Afghanistan</vscode-option>
   <vscode-option>Albania</vscode-option>
   <vscode-option>Algeria</vscode-option>
@@ -196,4 +208,20 @@
   <vscode-option>Yemen</vscode-option>
   <vscode-option>Zambia</vscode-option>
   <vscode-option>Zimbabwe</vscode-option>
-</vscode-single-select>
+</vscode-single-select>
+
+<script>
+  import type { SearchMethod } from "@vscode-elements/elements/dist/includes/vscode-select/types";
+  import type { VscodeSingleSelect } from "@vscode-elements/elements/dist/vscode-single-select";
+
+  const cb = document.querySelector<VscodeSingleSelect>("#combobox-example");
+  const sl = document.querySelector<HTMLSelectElement>(
+    "#search-method-selector"
+  );
+
+  sl?.addEventListener("change", () => {
+    cb!.filter = sl?.options[sl.selectedIndex].value as SearchMethod;
+  });
+
+  cb!.filter = sl?.options[sl.selectedIndex].value as SearchMethod;
+</script>

src/content/components/multi-select.mdx

@@ -48,12 +48,34 @@ import Imports from "@components/examples/multi-select/Imports.astro";
   <ComboboxExample />
   <Fragment slot="html">
     ```html
-    <vscode-multi-select filter="startsWith" id="combobox-example" combobox>
+    <p>
+      <label for="search-method">Search method:</label>
+      <select name="search-method-selector" id="search-method-selector">
+        <option value="contains">contains</option>
+        <option value="fuzzy">fuzzy</option>
+        <option value="startsWith">startsWith</option>
+        <option value="startsWithPerTerm">startsWithPerTerm</option>
+      </select>
+    </p>
+
+    <vscode-multi-select id="combobox-example" combobox>
       <vscode-option>Afghanistan</vscode-option>
       <vscode-option>Albania</vscode-option>
       <vscode-option>Algeria</vscode-option>
       ...
     </vscode-multi-select>
     ```
   </Fragment>
+  <Fragment slot="js">
+    ```javascript
+    const cb = document.querySelector("#combobox-example");
+    const sl = document.querySelector("#search-method-selector");
+
+    sl.addEventListener("change", () => {
+      cb.filter = sl.options[sl.selectedIndex].value;
+    });
+
+    cb.filter = sl.options[sl.selectedIndex].value;
+    ```
+  </Fragment>
 </Demo>

src/content/components/single-select.mdx

@@ -42,11 +42,33 @@ import Imports from "@components/examples/single-select/Imports.astro";
   <ComboboxExample />
   <Fragment slot="html">
     ```html
-    <vscode-single-select filter="fuzzy" combobox>
+    <p>
+      <label for="search-method">Search method:</label>
+      <select name="search-method-selector" id="search-method-selector">
+        <option value="contains">contains</option>
+        <option value="fuzzy">fuzzy</option>
+        <option value="startsWith">startsWith</option>
+        <option value="startsWithPerTerm">startsWithPerTerm</option>
+      </select>
+    </p>
+    
+    <vscode-single-select id="combobox-example" combobox>
       <vscode-option>Afghanistan</vscode-option>
       <vscode-option>Albania</vscode-option>
       ...
     </vscode-single-select>
     ```
   </Fragment>
+  <Fragment slot="js">
+    ```javascript
+    const cb = document.querySelector("#combobox-example");
+    const sl = document.querySelector("#search-method-selector");
+
+    sl.addEventListener("change", () => {
+      cb.filter = sl.options[sl.selectedIndex].value;
+    });
+
+    cb.filter = sl.options[sl.selectedIndex].value;
+    ```
+  </Fragment>
 </Demo>