fix(xref): enable empty-term browsing in search UI

- Remove required attribute from term input
- Allow form submission when specs are provided without a term
- Use entry.term for cite generation when search term is empty
- Include 'term' in requested fields so browse results have term data
- Fall back to entry.spec for shortname display
- Auto-open Advanced Search when URL has specs/types/for params
- Remove options.includes guard from select() so URL-driven
  selections work before metadata options are loaded

Author: marcoscaceres

static/xref/index.html

@@ -13,7 +13,7 @@
     <form action="/xref" id="xref-search" name="xref-search" method="post">
       <div class="field">
         <label for="term">Terms, concept, or WebIDL</label>
-        <input name="term" placeholder="event target, EventTarget"  autocomplete="off" aria-autocomplete="list" required autofocus/>
+        <input name="term" placeholder="event target, EventTarget"  autocomplete="off" aria-autocomplete="list" autofocus/>
       </div>
       <div class="field advanced" hidden>
         <label for="specs">Specification(s) short name</label>

static/xref/script.js

@@ -52,8 +52,8 @@ class OptionSelector extends HTMLInputElement {
   }
 
   select(value) {
-    const { selectedValues, elSelections, options } = this;
-    if (value === '' || selectedValues.has(value) || !options.includes(value)) {
+    const { selectedValues, elSelections } = this;
+    if (value === '' || selectedValues.has(value)) {
       return;
     }
 
@@ -84,7 +84,7 @@ const specStatusType = {
 
 let metadata;
 const options = {
-  fields: ['shortname', 'spec', 'uri', 'type', 'for', 'status'],
+  fields: ['shortname', 'spec', 'uri', 'type', 'for', 'status', 'term'],
   spec_type: ['draft', 'snapshot'],
   all: true,
 };
@@ -114,7 +114,7 @@ function getFormData() {
 
 async function handleSubmit() {
   const data = getFormData();
-  if (data.term === '') return;
+  if (data.term === '' && !data.specs) return;
 
   const params = new URLSearchParams(Object.entries(data));
   history.replaceState(null, null, `?${params}`);
@@ -137,15 +137,16 @@ async function handleSubmit() {
 }
 
 function renderResults(entries, query) {
-  const { term } = query;
-  caption.innerText = `Searched for "${term}".`;
+  const { term: searchTerm } = query;
+  caption.innerText = searchTerm ? `Searched for "${searchTerm}".` : `Browsing spec definitions.`;
   if (!entries.length) {
     output.innerHTML = `<tr><td colspan="4">No results found.</td></tr>`;
     return;
   }
 
   let html = '';
   for (const entry of entries) {
+    const term = searchTerm || entry.term || '';
     const specInfo = metadata.specs[entry.status][entry.spec];
     const link = new URL(entry.uri, specInfo.url).href;
     const title = escapeHTML(specInfo.title);
@@ -160,7 +161,7 @@ function renderResults(entries, query) {
     let row = `
       <tr>
         <td><a href="${link}">${title}</a></td>
-        <td>${entry.shortname}</td>
+        <td>${entry.shortname || entry.spec || ''}</td>
         <td>${entry.type}</td>
         <td>${cite}</td>
       </tr>`;
@@ -286,6 +287,7 @@ async function ready() {
   });
 
   const { searchParams } = new URL(window.location.href);
+  const hasAdvancedParams = searchParams.has('specs') || searchParams.has('types') || searchParams.has('for');
   for (const [field, value] of searchParams) {
     switch (field) {
       case 'term':
@@ -298,7 +300,12 @@ async function ready() {
         break;
     }
   }
-  if (searchParams.has('term')) {
+  if (hasAdvancedParams) {
+    form.advanced.checked = true;
+    form.querySelectorAll('.advanced').forEach(el => { el.hidden = false; });
+    localStorage.setItem('showAdvanced', 'yes');
+  }
+  if (searchParams.has('term') || hasAdvancedParams) {
     handleSubmit();
   }