From e15ff2d86e370bdffbe944ff7f16e6fd0cb58298 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Mon, 14 Nov 2022 22:31:29 -0800
Subject: [PATCH] datalist autocomplete for facet filters, refs #1890

---
 datasette/static/table.js | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/datasette/static/table.js b/datasette/static/table.js
index 096a27ac..ba5c649d 100644
--- a/datasette/static/table.js
+++ b/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);
+    }
+  });
+})();