+
+
+
+
diff --git a/example/08a-search-results.php b/example/08a-search-results.php
new file mode 100644
index 0000000..c0b23d6
--- /dev/null
+++ b/example/08a-search-results.php
@@ -0,0 +1,100 @@
+
+
+
+
+
+ Matched places
+
+ Enter a search term to find a place.
+
+ No matches for .
+
+
+
+
+
diff --git a/src/AutocompleteHandler.es6 b/src/AutocompleteHandler.es6
new file mode 100644
index 0000000..40d4995
--- /dev/null
+++ b/src/AutocompleteHandler.es6
@@ -0,0 +1,237 @@
+/**
+ * Enhances plain GET search forms with background result previews.
+ * Normal form submission is left untouched, so pressing Enter still follows
+ * the form action using the browser's standard navigation.
+ */
+export class AutocompleteHandler {
+ constructor(
+ navigationController,
+ logger = console,
+ debug = false,
+ scheduler = globalThis.setTimeout.bind(globalThis),
+ clearScheduler = globalThis.clearTimeout.bind(globalThis),
+ delay = 200,
+ ) {
+ this.navigationController = navigationController;
+ this.logger = logger;
+ this.debug = debug;
+ this.scheduler = scheduler;
+ this.clearScheduler = clearScheduler;
+ this.delay = delay;
+ this.state = new WeakMap();
+ }
+
+ initAutocomplete = (fluxElement) => {
+ if(!(fluxElement instanceof HTMLFormElement)) {
+ throw new TypeError("data-flux type \"autocomplete\" must be applied to a form element.");
+ }
+
+ if(this.state.has(fluxElement)) {
+ return;
+ }
+
+ this.state.set(fluxElement, {
+ timer: null,
+ minLength: this.getMinLength(fluxElement),
+ requestId: 0,
+ resultsElement: null,
+ });
+ this.hideSubmitControls(fluxElement);
+ fluxElement.addEventListener("input", this.onInput);
+ fluxElement.addEventListener("keydown", this.onKeyDown);
+ }
+
+ initAutocompleteResults = () => {
+ }
+
+ onInput = (e) => {
+ let form = e.currentTarget;
+ let state = this.state.get(form);
+ if(!state) {
+ return;
+ }
+
+ if(state.timer) {
+ this.clearScheduler(state.timer);
+ }
+
+ state.timer = this.scheduler(() => {
+ state.timer = null;
+ this.updateResults(form);
+ }, this.delay);
+ }
+
+ onKeyDown = (e) => {
+ if(e.key !== "ArrowDown" && e.key !== "ArrowUp") {
+ return;
+ }
+
+ let form = e.currentTarget;
+ let state = this.state.get(form);
+ let focusableElements = this.getFocusableElements(form, state?.resultsElement);
+ if(focusableElements.length === 0) {
+ return;
+ }
+
+ e.preventDefault();
+ this.moveFocus(focusableElements, e.key === "ArrowDown" ? 1 : -1);
+ }
+
+ updateResults(form) {
+ let formData = new FormData(form);
+ let state = this.state.get(form);
+ if(!state) {
+ return Promise.resolve(null);
+ }
+
+ if(!this.hasMinimumValue(formData, state.minLength)) {
+ this.removeResults(form, state);
+ return Promise.resolve(null);
+ }
+
+ let requestId = ++state.requestId;
+ return this.navigationController.fetchForm(
+ form,
+ formData,
+ newDocument => {
+ if(state.requestId !== requestId) {
+ return;
+ }
+
+ this.applyResults(form, state, newDocument);
+ },
+ );
+ }
+
+ getMinLength(form) {
+ let minLength = Number.parseInt(form.dataset["fluxMinLength"] ?? "", 10);
+ if(Number.isFinite(minLength) && minLength >= 0) {
+ return minLength;
+ }
+
+ return 3;
+ }
+
+ hideSubmitControls(form) {
+ form.querySelectorAll("button, input[type='submit'], input[type='image']").forEach(element => {
+ if(element instanceof HTMLButtonElement && element.type !== "submit") {
+ return;
+ }
+
+ element.hidden = true;
+ element.dataset["fluxAutocompleteButton"] = "";
+ });
+ }
+
+ hasMinimumValue(formData, minLength) {
+ for(let value of formData.values()) {
+ if(typeof value === "string" && value.trim().length >= minLength) {
+ return true;
+ }
+
+ if(typeof File !== "undefined" && value instanceof File && value.name !== "") {
+ return true;
+ }
+ }
+
+ return false;
+ }
+
+ applyResults(form, state, newDocument) {
+ let newResultsElement = newDocument.querySelector('[data-flux="autocomplete-results"]');
+ if(!newResultsElement) {
+ this.removeResults(form, state);
+ if(this.debug) {
+ this.logger.debug("No autocomplete results element found in response", form);
+ }
+ return;
+ }
+
+ newResultsElement.dataset["fluxAutocompleteMounted"] = "";
+ newResultsElement.addEventListener("keydown", this.onResultsKeyDown);
+ if(state.resultsElement?.isConnected) {
+ state.resultsElement.replaceWith(newResultsElement);
+ }
+ else {
+ form.after(newResultsElement);
+ }
+
+ state.resultsElement = newResultsElement;
+ }
+
+ onResultsKeyDown = (e) => {
+ if(e.key !== "ArrowDown" && e.key !== "ArrowUp") {
+ return;
+ }
+
+ let resultsElement = e.currentTarget;
+ let form = this.findOwningForm(resultsElement);
+ if(!form) {
+ return;
+ }
+
+ let focusableElements = this.getFocusableElements(form, resultsElement);
+ if(focusableElements.length === 0) {
+ return;
+ }
+
+ e.preventDefault();
+ this.moveFocus(focusableElements, e.key === "ArrowDown" ? 1 : -1);
+ }
+
+ findOwningForm(resultsElement) {
+ let previousElement = resultsElement.previousElementSibling;
+ while(previousElement) {
+ if(previousElement instanceof HTMLFormElement && this.state.has(previousElement)) {
+ return previousElement;
+ }
+
+ previousElement = previousElement.previousElementSibling;
+ }
+
+ return null;
+ }
+
+ getFocusableElements(form, resultsElement) {
+ let selectors = [
+ "a[href]",
+ "button:not([disabled])",
+ "input:not([disabled])",
+ "select:not([disabled])",
+ "textarea:not([disabled])",
+ '[tabindex]:not([tabindex="-1"])',
+ ].join(",");
+ let elements = [
+ ...form.querySelectorAll(selectors),
+ ];
+
+ if(resultsElement?.isConnected) {
+ elements.push(...resultsElement.querySelectorAll(selectors));
+ }
+
+ return elements.filter(element => !element.hidden);
+ }
+
+ moveFocus(focusableElements, direction) {
+ let currentIndex = focusableElements.indexOf(document.activeElement);
+ let nextIndex = currentIndex + direction;
+ if(currentIndex === -1) {
+ nextIndex = direction > 0 ? 0 : focusableElements.length - 1;
+ }
+
+ nextIndex = Math.max(0, Math.min(focusableElements.length - 1, nextIndex));
+ focusableElements[nextIndex].focus();
+ }
+
+ removeResults(form, state) {
+ if(state.resultsElement?.isConnected) {
+ state.resultsElement.remove();
+ }
+
+ state.resultsElement = null;
+ let adjacentResultsElement = form.nextElementSibling;
+ if(adjacentResultsElement?.dataset["fluxAutocompleteMounted"] !== undefined) {
+ adjacentResultsElement.remove();
+ }
+ }
+}
diff --git a/src/DirectiveRegistry.es6 b/src/DirectiveRegistry.es6
index a35b612..a246c63 100644
--- a/src/DirectiveRegistry.es6
+++ b/src/DirectiveRegistry.es6
@@ -47,6 +47,14 @@ const DIRECTIVE_DEFINITIONS = Object.freeze({
handler: "autoSubmit",
description: "Submit the containing form in the background.",
},
+ "autocomplete": {
+ handler: "autocomplete",
+ description: "Fetch form results in the background as the user types.",
+ },
+ "autocomplete-results": {
+ handler: "autocompleteResults",
+ description: "Mark the response element used by autocomplete forms.",
+ },
"link": {
handler: "autoLink",
description: "Follow the link in the background.",
diff --git a/src/Flux.es6 b/src/Flux.es6
index d4fde91..291868c 100644
--- a/src/Flux.es6
+++ b/src/Flux.es6
@@ -11,6 +11,7 @@ import {FormHandler} from "./FormHandler.es6";
import {LinkHandler} from "./LinkHandler.es6";
import {ResponseHandler} from "./ResponseHandler.es6";
import {LiveHandler} from "./LiveHandler.es6";
+import {AutocompleteHandler} from "./AutocompleteHandler.es6";
import {Handler as DragOrderHandler} from "./DragOrder/Handler.es6";
import {RuntimeConfig} from "./RuntimeConfig.es6";
@@ -40,6 +41,7 @@ export class Flux {
linkHandler;
responseHandler;
liveHandler;
+ autocompleteHandler;
dragOrderHandler;
logger;
@@ -59,6 +61,7 @@ export class Flux {
liveHandler = undefined,
logger = undefined,
dragOrderHandler = undefined,
+ autocompleteHandler = undefined,
) {
handleWindowPopState();
this.logger = logger ?? console;
@@ -115,6 +118,11 @@ export class Flux {
() => Date.now(),
DomPath,
);
+ this.autocompleteHandler = autocompleteHandler ?? new AutocompleteHandler(
+ this.navigationController,
+ this.logger,
+ Flux.DEBUG,
+ );
this.dragOrderHandler = dragOrderHandler ?? new DragOrderHandler(
this.formHandler,
document,
@@ -132,6 +140,8 @@ export class Flux {
liveInner: this.storeLiveInnerUpdateElement,
updateAttributes: this.storeAttributesUpdateElement,
autoSubmit: this.formHandler.initAutoSubmit,
+ autocomplete: this.autocompleteHandler.initAutocomplete,
+ autocompleteResults: this.autocompleteHandler.initAutocompleteResults,
autoLink: this.linkHandler.initAutoLink,
dragOrder: this.dragOrderHandler.initDragOrder,
});
diff --git a/src/NavigationController.es6 b/src/NavigationController.es6
index 68347c8..e81d7aa 100644
--- a/src/NavigationController.es6
+++ b/src/NavigationController.es6
@@ -19,6 +19,14 @@ export class NavigationController {
}
submitForm(form, formData, onDocument, submitter = null) {
+ return this.requestForm(form, formData, onDocument, submitter, "submitForm");
+ }
+
+ fetchForm(form, formData, onDocument, submitter = null) {
+ return this.requestForm(form, formData, onDocument, submitter, null);
+ }
+
+ requestForm(form, formData, onDocument, submitter = null, historyAction = "submitForm") {
let method = (form.getAttribute("method") ?? "get").toLowerCase();
let url = form.action;
let requestOptions = {
@@ -38,7 +46,7 @@ export class NavigationController {
url,
requestOptions,
{
- action: "submitForm",
+ action: historyAction,
errorPrefix: "Form submission error",
},
onDocument,
diff --git a/test/Flux.test.js b/test/Flux.test.js
index 7e1e494..7a72c5a 100644
--- a/test/Flux.test.js
+++ b/test/Flux.test.js
@@ -12,6 +12,7 @@ import {FormHandler} from "../src/FormHandler.es6";
import {LinkHandler} from "../src/LinkHandler.es6";
import {ResponseHandler} from "../src/ResponseHandler.es6";
import {LiveHandler} from "../src/LiveHandler.es6";
+import {AutocompleteHandler} from "../src/AutocompleteHandler.es6";
import {Handler as DragOrderHandler} from "../src/DragOrder/Handler.es6";
import {Preview} from "../src/DragOrder/Preview.es6";
@@ -649,6 +650,38 @@ describe("NavigationController", () => {
expect(pushState).not.toHaveBeenCalled();
expect(callback).toHaveBeenCalledWith(expect.any(Document));
});
+
+ it("fetches a form document without pushing history state", async () => {
+ document.body.innerHTML = `
+