Mark TODOs as comments and add Inputs.search documentation (#518)

* change todos to comments and add Inputs.search doc
* add API reference

Author: cinxmo

docs/inputs/checkbox.md

@@ -79,7 +79,7 @@ const size2 = view(Inputs.checkbox(
 size2
 ```
 
-[TODO] check if okay, removed link to Hello, Inputs.
+<!--[TODO] check if okay, removed link to Hello, Inputs. -->
 
 Passing a Map to Checkbox is especially useful in conjunction with [d3.group](https://observablehq.com/@d3/d3-group). For example, given a tabular dataset of Olympic athletes, we can use d3.group to group them by gold medal count, and then Checkbox to select the athletes for the chosen count. Note that the value of the Checkbox will be an array of arrays, since d3.group returns a Map from key to array; use [*array*.flat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat) to merge these arrays if desired.
 

docs/inputs/color.md

@@ -18,7 +18,7 @@ const fill = view(Inputs.color({label: "Fill", value: d3.color("steelblue").form
 
 If you specify the *datalist* option as an array of hexadecimal color strings, the color picker will show this set of colors for convenient picking. (The user will still be allowed to pick another color, however; if you want to limit the choice to a specific set, then a radio or select input may be more appropriate.)
 
-[TODO] update to the new Observable color palette?
+<!-- [TODO] update to the new Observable color palette? -->
 
 ```js echo
 const stroke = view(Inputs.color({label: "Stroke", datalist: d3.schemeTableau10}));

docs/inputs/file.md

@@ -1,12 +1,12 @@
 # File input
 
-[TODO] check okay, updated to point to /javascript/files rather than FileAttachment info in docs
+<!-- [TODO] check okay, updated to point to /javascript/files rather than FileAttachment info in docs -->
 
 The File input specifies a local file. The exposed value provides the same interface as an Observable [file attachment](../javascript/files) for convenient parsing in various formats such as text, image, JSON, CSV, ZIP, and XLSX; however, the file is not uploaded and is only available temporarily in memory.
 
 By default, any file is allowed, and the value of the input resolves to null.
 
-[TODO] check error, return to File input after hearing back (Fil has PR submitted)
+<!-- [TODO] check error, return to File input after hearing back (Fil has PR submitted) -->
 
 ```js echo
 const file = view(Inputs.file())

docs/inputs/radio.md

@@ -87,9 +87,9 @@ const size2 = view(Inputs.radio(
 size2
 ```
 
-[TODO] check okay to remove ref to Hello, Inputs below
+<!-- [TODO] check okay to remove ref to Hello, Inputs below -->
 
-[TODO] check if linking to d3-group notebook below is best
+<!-- [TODO] check if linking to d3-group notebook below is best -->
 
 Passing a Map to Radio is especially useful in conjunction with [d3.group](https://observablehq.com/@d3/d3-group). For example, given a tabular dataset of Olympic athletes, we can use d3.group to group them by gold medal 🥇 count, and then Radio to select the athletes for the chosen count. 
 

docs/inputs/search.md

@@ -1,6 +1,8 @@
 # Search input
 
-[TODO] check on Hello, Inputs removed below. 
+[Examples ›](https://observablehq.com/@observablehq/input-search) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#search)
+
+<!-- [TODO] check on Hello, Inputs removed below. -->
 
 The Search input allows freeform, full-text search of a tabular dataset (or a single column of values) using a simple query parser. It is often paired with a [Table input](./table). 
 
@@ -11,7 +13,12 @@ const penguins = FileAttachment("penguins.csv").csv({typed: true});
 ```
 
 ```js echo
-const search = view(Inputs.search(penguins));
+const searchInput = Inputs.search(penguins);
+const search = Generators.input(searchInput);
+```
+
+```js echo
+searchInput
 ```
 
 ```js echo
@@ -23,13 +30,29 @@ Or, as a table:
 ```js echo
 Inputs.table(search)
 ```
-[TODO] fix below to interactively search on click
 
-If you search for multiple terms, such as ${htl.html`<a style="cursor: pointer; border-bottom: dotted 1px;" onclick=${() => { viewof search.query = "gen bis"; viewof search.dispatchEvent(new CustomEvent("input")); }}>“gen bis”`} (for Gentoos on the Biscoe Islands) or ${htl.html`<a style="cursor: pointer; border-bottom: dotted 1px;" onclick=${() => { viewof search.query = "gen fem"; viewof search.dispatchEvent(new CustomEvent("input")); }}>“gen fem”`} (for female Gentoos), every term must match: there’s an implicit logical AND.
 
-[TODO] where should Observable Inputs general point now? Add an "Inputs overview" page? 
+```js
+import {html} from "npm:htl";
+```
+
+```js echo
+function genBisSearch() {
+  searchInput.query = "gen bis";
+  searchInput.dispatchEvent(new CustomEvent("input"));
+}
+
+function genFemSearch() {
+  searchInput.query = "gen fem";
+  searchInput.dispatchEvent(new CustomEvent("input"));
+}
+```
+
+If you search for multiple terms, such as ${html`<a style="cursor: pointer; border-bottom: dotted 1px;" onclick=${genBisSearch}>“gen bis”`} (for Gentoos on the Biscoe Islands) or ${html`<a style="cursor: pointer; border-bottom: dotted 1px;" onclick=${genFemSearch}>“gen fem”`} (for female Gentoos), every term must match: there’s an implicit logical AND.
+
+<!-- [TODO] where should Observable Inputs general point now? Add an "Inputs overview" page? -->
 
-[TODO] view vs. viewof reference material? Currently points here: https://observablehq.com/@observablehq/views
+<!-- [TODO] view vs. viewof reference material? Currently points here: https://observablehq.com/@observablehq/views -->
 
 The Search input is designed to work with other [Observable inputs](TODO) and especially [tables](./table). You can also refer to the current search results from any cell using a [view](https://observablehq.com/@observablehq/views). For example, to compute the median body mass of the matching penguins:
 

docs/inputs/select.md

@@ -90,9 +90,9 @@ const size2 = view(Inputs.select(new Map([["Short", 8], ["Tall", 12], ["Grande",
 size2
 ```
 
-[TODO] check if removing Hello, Inputs okay.
+<!-- [TODO] check if removing Hello, Inputs okay. -->
 
-[TODO] check if pointing to d3-group notebook is best.
+<!-- [TODO] check if pointing to d3-group notebook is best. -->
 
 Passing a Map to Select is especially useful in conjunction with [d3.group](https://observablehq.com/@d3/d3-group). For example, given a tabular dataset of Olympic athletes, we can use d3.group to group them by sport, and then Select to select the athletes for the chosen sport.
 

docs/inputs/table.md

@@ -1,6 +1,6 @@
 # Table input
 
-[TODO] check if removing Hello, Inputs okay.
+<!-- [TODO] check if removing Hello, Inputs okay. -->
 
 A Table displays tabular data. It’s fast: rows are rendered lazily on scroll. It sorts: click a header to sort, and click again to reverse. And it selects: click a checkbox on any row, and the selected rows are exported as a view value. (And for searching, see the [Search input](./search).) 
 
@@ -51,7 +51,7 @@ dataset, for example. Undefined values go to the end.
 Inputs.table(penguins, {sort: "body_mass_g", reverse: true})
 ```
 
-[TODO] these use view() instead of viewof operator. Is update below correct? Just changes "using the viewof operator" to "using the view function" (and do we need to update intro to views in docs?)
+<!-- [TODO] these use view() instead of viewof operator. Is update below correct? Just changes "using the viewof operator" to "using the view function" (and do we need to update intro to views in docs?) -->
 
 Tables are [view-compatible](https://observablehq.com/@observablehq/views): using the
 view function, you can use a table to select rows and refer to them from other
@@ -171,7 +171,7 @@ array of references to the actual objects in your data.
 
 For example, to preselect the first two items, you could write:
 
-[TODO] eval: false option for JS code below?
+<!-- [TODO] eval: false option for JS code below? -->
 
 ```js echo
 // { value: penguins.slice(0, 2)}

docs/inputs/text.md

@@ -48,7 +48,7 @@ The HTML5 *pattern*, *spellcheck*, *minlength*, and *maxlength* options are also
 const email = view(Inputs.text({type: "email", label: "Email", placeholder: "Enter your email"}));
 ```
 
-[TODO] fix below (had viewof operator before email.checkValidity(), not sure how to update)
+<!-- [TODO] fix below (had viewof operator before email.checkValidity(), not sure how to update) -->
 
 ```js echo
 //[email, email.checkValidity()]