Autocomplete typeahead for property and type lookups

[namedgraph]

What & why

The annotation overlay exposed ontology terms as two long <select> dropdowns — property (FOAF + DCMI properties) and typeof (classes), 160+ options each. Scanning them to find a term is slow. This replaces them with autocomplete typeaheads.

LinkedDataHub solves this with a typeahead, but its lookups fire debounced SPARQL. RDFa-Editor already prefetches every vocabulary into the SaxonJS document pool (doc() resolves synchronously), so this ports LDH's interaction while filtering a local in-memory list per keystroke — no async, no debounce, no ixsl:schedule-action.

Design

• New src/typeahead.xsl — a stable wrapper span[@data-field] holds one of two states, swapped via result-document literal result elements (the IXSL-idiomatic DOM build):
  • typing: input.typeahead-input + ul.typeahead-menu
  • committed: button.typeahead-value (label + hidden input carrying the IRI, LDH-style button swap)
• Options re-render per keystroke from local:vocab-terms (prefix-ranked, capped at 50, matched substring bold-highlighted). Keyboard nav mirrors the slash menu (Arrow/Enter/Escape, first option pre-selected). Options commit on ixsl:onmousedown — before the input's focusout — with option children pointer-events:none so the <li> is always the event target.
• local:typeahead-value reads the committed hidden IRI, else a free-typed absolute IRI (local:is-absolute-iri), else the untouched button→edit value parked on @data-editing-iri (cleared on the first keystroke — the stale-selection guard). Typing/pasting a full IRI is accepted directly, so the per-field custom-IRI inputs and the urn:rdfa-editor:custom sentinel are dropped for property/type.
• datatype stays a <select> (short XSD list) with its sentinel + custom-datatype input and the datatype↔lang mutual-exclusion — unchanged.
• Dead local:vocab-options and local:ontology-label removed from vocab.xsl.

Tests

• Adapted datatype / features / editor / tables suites to drive the typeahead via a shared tests/browser/typeahead-helper.mjs. The features lint test keeps term-unresolvable coverage by routing the bare term through the retained datatype free-text input.
• New tests/browser/typeahead.mjs (17 assertions): filter narrows the list, ArrowDown+Enter commits, mouse-select commits, free-IRI entry, non-IRI rejection, edit-prefill renders the committed button, input focuses on re-edit, and stale-selection invalidation.

Verification

• SEF compiles clean; headless suites all pass (extractor/canonical/lint — untouched).
• Full browser suite exits 0, zero failures.

🤖 Generated with Claude Code