Search now jumps to the correct location

lib/search.js

@@ -36,6 +36,47 @@ var Search = (function() {
     'Enter image prompt'
   ];
 
+  function assignAnchors() {
+    var defCards = document.querySelectorAll('.def-card');
+    defCards.forEach(function(card) {
+      var h3 = card.querySelector('h3');
+      if (h3) {
+        var id = slugify(h3.textContent.trim());
+        if (id) card.setAttribute('id', id);
+      }
+    });
+
+    var tables = document.querySelectorAll('.glossary-table tbody tr');
+    tables.forEach(function(row) {
+      var firstTd = row.querySelector('td');
+      if (firstTd) {
+        var id = slugify(firstTd.textContent.trim());
+        if (id) row.setAttribute('id', id);
+      }
+    });
+
+    var useGrid = document.querySelector('.use-grid');
+    if (useGrid) {
+      var useCards = useGrid.querySelectorAll('.use-card');
+      useCards.forEach(function(card) {
+        var h3 = card.querySelector('h3');
+        if (h3) {
+          var id = slugify(h3.textContent.trim());
+          if (id) card.setAttribute('id', id);
+        }
+      });
+    }
+
+    var promptBlocks = document.querySelectorAll('.prompt-block');
+    promptBlocks.forEach(function(block) {
+      var h3 = block.querySelector('h3');
+      if (h3) {
+        var id = slugify(h3.textContent.trim());
+        if (id) block.setAttribute('id', id);
+      }
+    });
+  }
+
   function init() {
     var navInner = document.querySelector('.nav-inner');
     if (!navInner) return;
@@ -43,6 +84,8 @@ var Search = (function() {
     var brand = navInner.querySelector('.nav-brand');
     if (!brand) return;
 
+    assignAnchors();
+
     // Create search wrapper
     var searchWrapper = document.createElement('div');
     searchWrapper.className = 'sidebar-search';
@@ -175,7 +218,8 @@ var Search = (function() {
             heading: headingText,
             category: catText,
             snippet: defText,
-            fullText: fullText.toLowerCase()
+            fullText: fullText.toLowerCase(),
+            anchor: slugify(headingText)
           });
         });
 
@@ -194,7 +238,8 @@ var Search = (function() {
             heading: acronym,
             category: 'Acronym',
             snippet: meaning,
-            fullText: (acronym + ' ' + meaning).toLowerCase()
+            fullText: (acronym + ' ' + meaning).toLowerCase(),
+            anchor: slugify(acronym)
           });
         });
 
@@ -229,7 +274,8 @@ var Search = (function() {
               heading: headingText,
               category: sectionName,
               snippet: cardText,
-              fullText: (sectionName + ' ' + headingText + ' ' + cardText).toLowerCase()
+              fullText: (sectionName + ' ' + headingText + ' ' + cardText).toLowerCase(),
+              anchor: slugify(headingText)
             });
           });
         });
@@ -251,7 +297,8 @@ var Search = (function() {
               heading: headingText,
               category: 'Use Case',
               snippet: cardText,
-              fullText: (headingText + ' ' + cardText).toLowerCase()
+              fullText: (headingText + ' ' + cardText).toLowerCase(),
+              anchor: slugify(headingText)
             });
           });
         }
@@ -275,7 +322,8 @@ var Search = (function() {
               heading: headingText,
               category: labelText || 'Prompt',
               snippet: cardText,
-              fullText: (headingText + ' ' + labelText + ' ' + cardText).toLowerCase()
+              fullText: (headingText + ' ' + labelText + ' ' + cardText).toLowerCase(),
+              anchor: slugify(headingText)
             });
           });
         }
@@ -301,7 +349,8 @@ var Search = (function() {
                 heading: tds[0] ? tds[0].textContent.trim() : 'Table Entry',
                 category: 'Comparison',
                 snippet: rowText.trim(),
-                fullText: rowText.toLowerCase()
+                fullText: rowText.toLowerCase(),
+                anchor: slugify(tds[0] ? tds[0].textContent.trim() : 'Table Entry')
               });
             });
           });
@@ -404,6 +453,14 @@ var Search = (function() {
     return div.innerHTML;
   }
 
+  function slugify(text) {
+    return text
+      .toLowerCase()
+      .replace(/\(.*?\)/g, function(match) { return match.replace(/[()]/g, ''); })
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/^-+|-+$/g, '');
+  }
+
   function displayResults(foundResults, query) {
     results = foundResults;
     selectedIndex = -1;
@@ -424,7 +481,7 @@ var Search = (function() {
       var categoryLabel = r.category ? '<span class="search-result-category">' + escapeHTML(r.category) + '</span>' : '';
       var highlightedSnippet = highlightText(r.snippet, query);
 
-      html += '<div class="search-result-item" data-index="' + i + '" data-url="' + escapeHTML(r.url) + '">';
+      html += '<div class="search-result-item" data-index="' + i + '" data-url="' + escapeHTML(r.url) + '" data-anchor="' + escapeHTML(r.anchor || '') + '">';
       html += '<div class="search-result-title">';
       html += '<span class="search-result-page">' + escapeHTML(r.page) + '</span>';
       html += categoryLabel;
@@ -441,7 +498,8 @@ var Search = (function() {
     for (var j = 0; j < items.length; j++) {
       items[j].addEventListener('click', function() {
         var url = this.getAttribute('data-url');
-        navigateToResult({ url: url });
+        var anchor = this.getAttribute('data-anchor');
+        navigateToResult({ url: url, anchor: anchor });
       });
       items[j].addEventListener('mouseenter', function() {
         var idx = parseInt(this.getAttribute('data-index'), 10);
@@ -495,7 +553,11 @@ var Search = (function() {
   function navigateToResult(result) {
     hideDropdown();
     if (currentInput) currentInput.blur();
-    window.location.href = result.url;
+    var target = result.url;
+    if (result.anchor) {
+      target = result.url + '#' + result.anchor;
+    }
+    window.location.href = target;
   }
 
   return {