issue_comments

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).

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>

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.

Demo now live here: https://congress-legislators.datasettes.com/legislators/legislator_terms?_facet=party - select party and start typing.

Wrote a TIL about <datalist>: https://til.simonwillison.net/html/datalist

That prototype actually works really well! I'm going to add that to table.js.

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); } }); ```

This finds the right links on the page:

document.querySelectorAll('.facet-results [data-column] li:not(.facet-truncated) a')

This could start out as a purely JavaScript enhancement for pages that already figured out the available values through faceting, like you suggested.

I tried this out on https://congress-legislators.datasettes.com/legislators/legislator_terms for the party column - here's the demo:

I made this work by dropping the following HTML into the page in the browser DevTools: ```html <datalist id="party">

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