html_url,issue_url,id,node_id,user,created_at,updated_at,author_association,body,reactions,issue,performed_via_github_app
https://github.com/simonw/datasette/issues/1890#issuecomment-1314891228,https://api.github.com/repos/simonw/datasette/issues/1890,1314891228,IC_kwDOBm6k_c5OX6Xc,9599,2022-11-15T07:23:01Z,2022-11-15T07:23:01Z,OWNER,"Annoying: Mobile Safari doesn't seem to support separate labels and values. I should probably disable this feature on that browser, at least for foreign key facets (for the moment).","{""total_count"": 0, ""+1"": 0, ""-1"": 0, ""laugh"": 0, ""hooray"": 0, ""confused"": 0, ""heart"": 0, ""rocket"": 0, ""eyes"": 0}",1448143294,
https://github.com/simonw/datasette/issues/1890#issuecomment-1314856513,https://api.github.com/repos/simonw/datasette/issues/1890,1314856513,IC_kwDOBm6k_c5OXx5B,9599,2022-11-15T06:56:29Z,2022-11-15T06:56:29Z,OWNER,"Looks like I can fix that like so:
```html
<datalist id=""datalist-_city_id"">
    <option label=""San Francisco"" value=""1""></option>
    <option label=""Los Angeles"" value=""2""></option>
    <option label=""Detroit"" value=""3""></option>
    <option label=""Memnonia"" value=""4""></option>
</datalist>
```","{""total_count"": 0, ""+1"": 0, ""-1"": 0, ""laugh"": 0, ""hooray"": 0, ""confused"": 0, ""heart"": 0, ""rocket"": 0, ""eyes"": 0}",1448143294,
https://github.com/simonw/datasette/issues/1890#issuecomment-1314850524,https://api.github.com/repos/simonw/datasette/issues/1890,1314850524,IC_kwDOBm6k_c5OXwbc,9599,2022-11-15T06:48:37Z,2022-11-15T06:48:37Z,OWNER,"Spotted a bug with this on https://latest.datasette.io/fixtures/facetable?_facet=_city_id - the `_city_id` column is a foreign key, so you need to type `1` or `2` - but the autocomplete list shows the full text names for the cities.","{""total_count"": 0, ""+1"": 0, ""-1"": 0, ""laugh"": 0, ""hooray"": 0, ""confused"": 0, ""heart"": 0, ""rocket"": 0, ""eyes"": 0}",1448143294,
https://github.com/simonw/datasette/issues/1890#issuecomment-1314849867,https://api.github.com/repos/simonw/datasette/issues/1890,1314849867,IC_kwDOBm6k_c5OXwRL,9599,2022-11-15T06:47:51Z,2022-11-15T06:47:51Z,OWNER,Demo now live here: https://congress-legislators.datasettes.com/legislators/legislator_terms?_facet=party - select `party` and start typing.,"{""total_count"": 0, ""+1"": 0, ""-1"": 0, ""laugh"": 0, ""hooray"": 0, ""confused"": 0, ""heart"": 0, ""rocket"": 0, ""eyes"": 0}",1448143294,
https://github.com/simonw/datasette/issues/1890#issuecomment-1314848432,https://api.github.com/repos/simonw/datasette/issues/1890,1314848432,IC_kwDOBm6k_c5OXv6w,9599,2022-11-15T06:46:08Z,2022-11-15T06:46:08Z,OWNER,Wrote a TIL about `<datalist>`: https://til.simonwillison.net/html/datalist,"{""total_count"": 0, ""+1"": 0, ""-1"": 0, ""laugh"": 0, ""hooray"": 0, ""confused"": 0, ""heart"": 0, ""rocket"": 0, ""eyes"": 0}",1448143294,
https://github.com/simonw/datasette/issues/1890#issuecomment-1314835740,https://api.github.com/repos/simonw/datasette/issues/1890,1314835740,IC_kwDOBm6k_c5OXs0c,9599,2022-11-15T06:30:26Z,2022-11-15T06:30:26Z,OWNER,That prototype actually works really well! I'm going to add that to `table.js`.,"{""total_count"": 0, ""+1"": 0, ""-1"": 0, ""laugh"": 0, ""hooray"": 0, ""confused"": 0, ""heart"": 0, ""rocket"": 0, ""eyes"": 0}",1448143294,
https://github.com/simonw/datasette/issues/1890#issuecomment-1314833881,https://api.github.com/repos/simonw/datasette/issues/1890,1314833881,IC_kwDOBm6k_c5OXsXZ,9599,2022-11-15T06:27:21Z,2022-11-15T06:27:21Z,OWNER,"Here's a prototype:
```javascript
function createDataLists() {
  var facetResults = document.querySelectorAll("".facet-results [data-column]"");
  Array.from(facetResults).forEach(function (facetResult) {
    // Use link text from all links in the facet result
    var linkTexts = Array.from(
      facetResult.querySelectorAll(""li:not(.facet-truncated) a"")
    ).map(function (link) {
      return link.textContent;
    });
    // Create a datalist element
    var datalist = document.createElement(""datalist"");
    datalist.id = ""datalist-"" + facetResult.dataset.column;
    // Create an option element for each link text
    linkTexts.forEach(function (linkText) {
      var option = document.createElement(""option"");
      option.value = linkText;
      datalist.appendChild(option);
    });
    // Add the datalist to the facet result
    facetResult.appendChild(datalist);
  });
}
createDataLists();

// When any select with name=_filter_column changes, update the datalist
document.body.addEventListener(""change"", function (event) {
  if (event.target.name === ""_filter_column"") {
    event.target
      .closest("".filter-row"")
      .querySelector("".filter-value"")
      .setAttribute(""list"", ""datalist-"" + event.target.value);
  }
});
```","{""total_count"": 0, ""+1"": 0, ""-1"": 0, ""laugh"": 0, ""hooray"": 0, ""confused"": 0, ""heart"": 0, ""rocket"": 0, ""eyes"": 0}",1448143294,
https://github.com/simonw/datasette/issues/1890#issuecomment-1314829751,https://api.github.com/repos/simonw/datasette/issues/1890,1314829751,IC_kwDOBm6k_c5OXrW3,9599,2022-11-15T06:20:50Z,2022-11-15T06:20:50Z,OWNER,"This finds the right links on the page:

    document.querySelectorAll('.facet-results [data-column] li:not(.facet-truncated) a')","{""total_count"": 0, ""+1"": 0, ""-1"": 0, ""laugh"": 0, ""hooray"": 0, ""confused"": 0, ""heart"": 0, ""rocket"": 0, ""eyes"": 0}",1448143294,
https://github.com/simonw/datasette/issues/1890#issuecomment-1314825019,https://api.github.com/repos/simonw/datasette/issues/1890,1314825019,IC_kwDOBm6k_c5OXqM7,9599,2022-11-15T06:13:36Z,2022-11-15T06:13:36Z,OWNER,"This could start out as a purely JavaScript enhancement for pages that already figured out the available values through faceting, like you suggested.","{""total_count"": 0, ""+1"": 0, ""-1"": 0, ""laugh"": 0, ""hooray"": 0, ""confused"": 0, ""heart"": 0, ""rocket"": 0, ""eyes"": 0}",1448143294,
https://github.com/simonw/datasette/issues/1890#issuecomment-1314823752,https://api.github.com/repos/simonw/datasette/issues/1890,1314823752,IC_kwDOBm6k_c5OXp5I,9599,2022-11-15T06:11:49Z,2022-11-15T06:11:49Z,OWNER,"I tried this out on https://congress-legislators.datasettes.com/legislators/legislator_terms for the `party` column - here's the demo:

![datalist](https://user-images.githubusercontent.com/9599/201839812-db887ce0-c4b9-432c-8620-5ac73f222a63.gif)

I made this work by dropping the following HTML into the page in the browser DevTools:
```html
<datalist id=""party"">
<option value=""Anti-Administration"">
<option value=""Pro-Administration"">
<option value=""Republican"">
<option value=""Federalist"">
<option value=""Democratic Republican"">
<option value=""Pro-administration"">
<option value=""Anti-administration"">
<option value=""Unknown"">
<option value=""Adams"">
<option value=""Jackson"">
<option value=""Jackson Republican"">
<option value=""Crawford Republican"">
<option value=""Whig"">
<option value=""Jacksonian Republican"">
<option value=""Jacksonian"">
<option value=""Anti-Jacksonian"">
<option value=""Adams Democrat"">
<option value=""Nullifier"">
<option value=""Anti Mason"">
<option value=""Anti Masonic"">
<option value=""Anti Jacksonian"">
<option value=""Democrat"">
<option value=""Anti Jackson"">
<option value=""Union Democrat"">
<option value=""Conservative"">
<option value=""Ind. Democrat"">
<option value=""Independent"">
<option value=""Law and Order"">
<option value=""American"">
<option value=""Liberty"">
<option value=""Free Soil"">
<option value=""Ind. Republican-Democrat"">
<option value=""Ind. Whig"">
<option value=""Unionist"">
<option value=""States Rights"">
<option value=""Anti-Lecompton Democrat"">
<option value=""Constitutional Unionist"">
<option value=""Independent Democrat"">
<option value=""Unconditional Unionist"">
<option value=""Conservative Republican"">
<option value=""Ind. Republican"">
<option value=""Liberal Republican"">
<option value=""National Greenbacker"">
<option value=""Readjuster Democrat"">
<option value=""Readjuster"">
<option value=""Union"">
<option value=""Union Labor"">
<option value=""Populist"">
<option value=""Silver Republican"">
<option value=""Free Silver"">
<option value=""Silver"">
<option value=""Democratic and Union Labor"">
<option value=""Progressive Republican"">
<option value=""Progressive"">
<option value=""Prohibitionist"">
<option value=""Socialist"">
<option value=""Farmer-Labor"">
<option value=""American Labor"">
<option value=""Nonpartisan"">
<option value=""Coalitionist"">
<option value=""Popular Democrat"">
<option value=""Liberal"">
<option value=""New Progressive"">
<option value=""Republican-Conservative"">
<option value=""Democrat-Liberal"">
<option value=""AL"">
<option value=""Libertarian"">
</datalist>
```
And then adding `list=""party""` to the input element in the filter form.","{""total_count"": 0, ""+1"": 0, ""-1"": 0, ""laugh"": 0, ""hooray"": 0, ""confused"": 0, ""heart"": 0, ""rocket"": 0, ""eyes"": 0}",1448143294,
https://github.com/simonw/datasette/issues/1890#issuecomment-1314821337,https://api.github.com/repos/simonw/datasette/issues/1890,1314821337,IC_kwDOBm6k_c5OXpTZ,9599,2022-11-15T06:08:19Z,2022-11-15T06:08:19Z,OWNER,"Oh interesting... this doesn't even need to be attached to the visible faceting feature, necessarily: Datasette could try to detect when a column has a limited number of options (which the faceting code handles already) and could turn those into an auto-complete interface.

There's actually a native HTML element for this these days: the `<datalist>` https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist","{""total_count"": 0, ""+1"": 0, ""-1"": 0, ""laugh"": 0, ""hooray"": 0, ""confused"": 0, ""heart"": 0, ""rocket"": 0, ""eyes"": 0}",1448143294,