{"html_url": "https://github.com/simonw/datasette/issues/1890#issuecomment-1317889323", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1890", "id": 1317889323, "node_id": "IC_kwDOBm6k_c5OjWUr", "user": {"value": 536941, "label": "fgregg"}, "created_at": "2022-11-17T00:47:36Z", "updated_at": "2022-11-17T00:47:36Z", "author_association": "CONTRIBUTOR", "body": "amazing! thanks @simonw ", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1448143294, "label": "Autocomplete text entry for filter values that correspond to facets"}, "performed_via_github_app": null} {"html_url": "https://github.com/simonw/datasette/issues/1890#issuecomment-1316262169", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1890", "id": 1316262169, "node_id": "IC_kwDOBm6k_c5OdJEZ", "user": {"value": 9599, "label": "simonw"}, "created_at": "2022-11-16T03:22:40Z", "updated_at": "2022-11-16T03:22:40Z", "author_association": "OWNER", "body": "Actually this works as it should in desktop Safari:\r\n\r\n![autocomplete-safari](https://user-images.githubusercontent.com/9599/202075764-fbc4b4c8-c92f-4f69-81fd-84002de5aea7.gif)\r\n\r\nI'm going to just put up with the weird behaviour in Mobile Safari.", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1448143294, "label": "Autocomplete text entry for filter values that correspond to facets"}, "performed_via_github_app": null} {"html_url": "https://github.com/simonw/datasette/issues/1890#issuecomment-1316242752", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1890", "id": 1316242752, "node_id": "IC_kwDOBm6k_c5OdEVA", "user": {"value": 9599, "label": "simonw"}, "created_at": "2022-11-16T03:10:52Z", "updated_at": "2022-11-16T03:12:47Z", "author_association": "OWNER", "body": "https://bugs.webkit.org/show_bug.cgi?id=201768 - \" Datalist option's label not used\" - marked as RESOLVED FIXED on March 31st 2020.\r\n\r\nThe commit: https://trac.webkit.org/changeset/259330/webkit\r\n\r\nAnd here's the test mirrored on GitHub: https://cs.github.com/qtwebkit/webkit-mirror/blob/cc3fcd0b4bad1f7cf77c26e34aa01d16618d6d5e/LayoutTests/fast/forms/datalist/datalist-option-labels.html?q=datalist-option-labels.html", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1448143294, "label": "Autocomplete text entry for filter values that correspond to facets"}, "performed_via_github_app": null} {"html_url": "https://github.com/simonw/datasette/issues/1890#issuecomment-1316240839", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1890", "id": 1316240839, "node_id": "IC_kwDOBm6k_c5OdD3H", "user": {"value": 9599, "label": "simonw"}, "created_at": "2022-11-16T03:09:11Z", "updated_at": "2022-11-16T03:09:11Z", "author_association": "OWNER", "body": "Here's a polyfill for ``: https://github.com/mfranzke/datalist-polyfill\r\n\r\nIt shouldn't be necessary now that Safari has shipped support (apparently added in https://developer.apple.com/documentation/safari-release-notes/safari-12_1-release-notes#3130314 Safari 12.1 in March 2019).\r\n\r\nBut it does look like Safari doesn't support differing `label` and `value` attributes, though documentation about this is hard to come by.", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1448143294, "label": "Autocomplete text entry for filter values that correspond to facets"}, "performed_via_github_app": null} {"html_url": "https://github.com/simonw/datasette/issues/1890#issuecomment-1316233532", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1890", "id": 1316233532, "node_id": "IC_kwDOBm6k_c5OdCE8", "user": {"value": 9599, "label": "simonw"}, "created_at": "2022-11-16T03:00:58Z", "updated_at": "2022-11-16T03:00:58Z", "author_association": "OWNER", "body": "Oops, introduced a test failure: \r\n\r\n```\r\n def test_table_html_foreign_key_facets(app_client):\r\n response = app_client.get(\r\n \"/fixtures/foreign_key_references?_facet=foreign_key_with_blank_label\"\r\n )\r\n assert response.status == 200\r\n> assert (\r\n '
  • '\r\n \"- 1
    • \"\r\n ) in response.text\r\nE assert '
  • - 1
    • ' in '\\n\\n\\n fixtures: foreign_key_references: 2 rows\\n \\n\\n\\n\\n\\n'\r\nE + where '\\n\\n\\n fixtures: foreign_key_references: 2 rows\\n \\n\\n\\n\\n\\n' = .text\r\n```\r\nNeed to fix this test:\r\n\r\nhttps://github.com/simonw/datasette/blob/eac028d3f77aa5473a5fcf59240635a1bca80f7d/tests/test_table_html.py#L616-L624", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1448143294, "label": "Autocomplete text entry for filter values that correspond to facets"}, "performed_via_github_app": null} {"html_url": "https://github.com/simonw/datasette/issues/1890#issuecomment-1314891228", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1890", "id": 1314891228, "node_id": "IC_kwDOBm6k_c5OX6Xc", "user": {"value": 9599, "label": "simonw"}, "created_at": "2022-11-15T07:23:01Z", "updated_at": "2022-11-15T07:23:01Z", "author_association": "OWNER", "body": "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).", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1448143294, "label": "Autocomplete text entry for filter values that correspond to facets"}, "performed_via_github_app": null} {"html_url": "https://github.com/simonw/datasette/issues/1890#issuecomment-1314856513", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1890", "id": 1314856513, "node_id": "IC_kwDOBm6k_c5OXx5B", "user": {"value": 9599, "label": "simonw"}, "created_at": "2022-11-15T06:56:29Z", "updated_at": "2022-11-15T06:56:29Z", "author_association": "OWNER", "body": "Looks like I can fix that like so:\r\n```html\r\n\r\n \r\n \r\n \r\n \r\n\r\n```", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1448143294, "label": "Autocomplete text entry for filter values that correspond to facets"}, "performed_via_github_app": null} {"html_url": "https://github.com/simonw/datasette/issues/1890#issuecomment-1314850524", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1890", "id": 1314850524, "node_id": "IC_kwDOBm6k_c5OXwbc", "user": {"value": 9599, "label": "simonw"}, "created_at": "2022-11-15T06:48:37Z", "updated_at": "2022-11-15T06:48:37Z", "author_association": "OWNER", "body": "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.", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1448143294, "label": "Autocomplete text entry for filter values that correspond to facets"}, "performed_via_github_app": null} {"html_url": "https://github.com/simonw/datasette/issues/1890#issuecomment-1314849867", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1890", "id": 1314849867, "node_id": "IC_kwDOBm6k_c5OXwRL", "user": {"value": 9599, "label": "simonw"}, "created_at": "2022-11-15T06:47:51Z", "updated_at": "2022-11-15T06:47:51Z", "author_association": "OWNER", "body": "Demo now live here: https://congress-legislators.datasettes.com/legislators/legislator_terms?_facet=party - select `party` and start typing.", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1448143294, "label": "Autocomplete text entry for filter values that correspond to facets"}, "performed_via_github_app": null} {"html_url": "https://github.com/simonw/datasette/issues/1890#issuecomment-1314848432", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1890", "id": 1314848432, "node_id": "IC_kwDOBm6k_c5OXv6w", "user": {"value": 9599, "label": "simonw"}, "created_at": "2022-11-15T06:46:08Z", "updated_at": "2022-11-15T06:46:08Z", "author_association": "OWNER", "body": "Wrote a TIL about ``: https://til.simonwillison.net/html/datalist", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1448143294, "label": "Autocomplete text entry for filter values that correspond to facets"}, "performed_via_github_app": null} {"html_url": "https://github.com/simonw/datasette/issues/1890#issuecomment-1314835740", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1890", "id": 1314835740, "node_id": "IC_kwDOBm6k_c5OXs0c", "user": {"value": 9599, "label": "simonw"}, "created_at": "2022-11-15T06:30:26Z", "updated_at": "2022-11-15T06:30:26Z", "author_association": "OWNER", "body": "That prototype actually works really well! I'm going to add that to `table.js`.", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1448143294, "label": "Autocomplete text entry for filter values that correspond to facets"}, "performed_via_github_app": null} {"html_url": "https://github.com/simonw/datasette/issues/1890#issuecomment-1314833881", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1890", "id": 1314833881, "node_id": "IC_kwDOBm6k_c5OXsXZ", "user": {"value": 9599, "label": "simonw"}, "created_at": "2022-11-15T06:27:21Z", "updated_at": "2022-11-15T06:27:21Z", "author_association": "OWNER", "body": "Here's a prototype:\r\n```javascript\r\nfunction createDataLists() {\r\n var facetResults = document.querySelectorAll(\".facet-results [data-column]\");\r\n Array.from(facetResults).forEach(function (facetResult) {\r\n // Use link text from all links in the facet result\r\n var linkTexts = Array.from(\r\n facetResult.querySelectorAll(\"li:not(.facet-truncated) a\")\r\n ).map(function (link) {\r\n return link.textContent;\r\n });\r\n // Create a datalist element\r\n var datalist = document.createElement(\"datalist\");\r\n datalist.id = \"datalist-\" + facetResult.dataset.column;\r\n // Create an option element for each link text\r\n linkTexts.forEach(function (linkText) {\r\n var option = document.createElement(\"option\");\r\n option.value = linkText;\r\n datalist.appendChild(option);\r\n });\r\n // Add the datalist to the facet result\r\n facetResult.appendChild(datalist);\r\n });\r\n}\r\ncreateDataLists();\r\n\r\n// When any select with name=_filter_column changes, update the datalist\r\ndocument.body.addEventListener(\"change\", function (event) {\r\n if (event.target.name === \"_filter_column\") {\r\n event.target\r\n .closest(\".filter-row\")\r\n .querySelector(\".filter-value\")\r\n .setAttribute(\"list\", \"datalist-\" + event.target.value);\r\n }\r\n});\r\n```", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1448143294, "label": "Autocomplete text entry for filter values that correspond to facets"}, "performed_via_github_app": null} {"html_url": "https://github.com/simonw/datasette/issues/1890#issuecomment-1314829751", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1890", "id": 1314829751, "node_id": "IC_kwDOBm6k_c5OXrW3", "user": {"value": 9599, "label": "simonw"}, "created_at": "2022-11-15T06:20:50Z", "updated_at": "2022-11-15T06:20:50Z", "author_association": "OWNER", "body": "This finds the right links on the page:\r\n\r\n document.querySelectorAll('.facet-results [data-column] li:not(.facet-truncated) a')", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1448143294, "label": "Autocomplete text entry for filter values that correspond to facets"}, "performed_via_github_app": null} {"html_url": "https://github.com/simonw/datasette/issues/1890#issuecomment-1314825019", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1890", "id": 1314825019, "node_id": "IC_kwDOBm6k_c5OXqM7", "user": {"value": 9599, "label": "simonw"}, "created_at": "2022-11-15T06:13:36Z", "updated_at": "2022-11-15T06:13:36Z", "author_association": "OWNER", "body": "This could start out as a purely JavaScript enhancement for pages that already figured out the available values through faceting, like you suggested.", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1448143294, "label": "Autocomplete text entry for filter values that correspond to facets"}, "performed_via_github_app": null} {"html_url": "https://github.com/simonw/datasette/issues/1890#issuecomment-1314823752", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1890", "id": 1314823752, "node_id": "IC_kwDOBm6k_c5OXp5I", "user": {"value": 9599, "label": "simonw"}, "created_at": "2022-11-15T06:11:49Z", "updated_at": "2022-11-15T06:11:49Z", "author_association": "OWNER", "body": "I tried this out on https://congress-legislators.datasettes.com/legislators/legislator_terms for the `party` column - here's the demo:\r\n\r\n![datalist](https://user-images.githubusercontent.com/9599/201839812-db887ce0-c4b9-432c-8620-5ac73f222a63.gif)\r\n\r\nI made this work by dropping the following HTML into the page in the browser DevTools:\r\n```html\r\n\r\n\r\n```\r\nAnd then adding `list=\"party\"` to the input element in the filter form.", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1448143294, "label": "Autocomplete text entry for filter values that correspond to facets"}, "performed_via_github_app": null} {"html_url": "https://github.com/simonw/datasette/issues/1890#issuecomment-1314821337", "issue_url": "https://api.github.com/repos/simonw/datasette/issues/1890", "id": 1314821337, "node_id": "IC_kwDOBm6k_c5OXpTZ", "user": {"value": 9599, "label": "simonw"}, "created_at": "2022-11-15T06:08:19Z", "updated_at": "2022-11-15T06:08:19Z", "author_association": "OWNER", "body": "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.\r\n\r\nThere's actually a native HTML element for this these days: the `` https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist", "reactions": "{\"total_count\": 0, \"+1\": 0, \"-1\": 0, \"laugh\": 0, \"hooray\": 0, \"confused\": 0, \"heart\": 0, \"rocket\": 0, \"eyes\": 0}", "issue": {"value": 1448143294, "label": "Autocomplete text entry for filter values that correspond to facets"}, "performed_via_github_app": null}