Search spelling suggestions across every list

frontend/src/views/SearchResults.vue

@@ -42,6 +42,7 @@
 
         <div v-else-if="results.length === 0" class="no-results">
           No results found for "{{ query }}"
+          <SearchSuggestion :suggestion="suggestion" @pick="applySuggestion" />
         </div>
 
         <div v-else class="results-list">
@@ -94,12 +95,14 @@
 import { ref, computed, onMounted, watch, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { searchApi, knowledgebaseApi } from '../api'
+import SearchSuggestion from '../components/SearchSuggestion.vue'
 
 const route = useRoute()
 const router = useRouter()
 
 const loading = ref(false)
 const results = ref([])
+const suggestion = ref(null)
 const query = ref('')
 const searchInput = ref('')
 const activeFilter = ref('all')
@@ -175,6 +178,7 @@ const filteredResults = computed(() => {
 async function search(q) {
   if (!q || q.length < 2) {
     results.value = []
+    suggestion.value = null
     return
   }
 
@@ -184,6 +188,10 @@ async function search(q) {
   try {
     const response = await searchApi.search(q)
     const data = response.data.data
+    // The global endpoint carries the suggestion with the results, so no second
+    // call is needed here. A list page that has no such key uses the
+    // useSearchSuggestion composable against /search/suggest instead.
+    suggestion.value = data?.suggestion || null
 
     // Handle ServiceNOW redirect
     if (data?.redirect?.type === 'servicenow') {
@@ -212,6 +220,14 @@ async function search(q) {
   }
 }
 
+// Take the offered spelling: put it in the box and search it, so the person
+// sees what was searched rather than results for a word they did not type.
+function applySuggestion(word) {
+  searchInput.value = word
+  suggestion.value = null
+  performSearch()
+}
+
 function performSearch() {
   const term = searchInput.value.trim()
   if (!term) return