datalist autocomplete for facet filters, refs #1890

datasette/static/table.js

@@ -235,3 +235,39 @@ var DROPDOWN_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="14" heig
     }
   });
 })();
+
+/* Set up datalist autocomplete for filter values */
+(function () {
+  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);
+    }
+  });
+})();