github
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=… | { "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 |