Search spelling suggestions across every list

plugins/network/frontend/views/NetworkDevicesList.vue

@@ -97,6 +97,7 @@
               <tr v-if="devices.length === 0">
                 <td colspan="9" style="text-align: center; color: var(--text-light);">
                   No network devices found
+                  <SearchSuggestion :suggestion="suggestion" @pick="applySuggestion" />
                 </td>
               </tr>
             </tbody>
@@ -122,13 +123,23 @@ import { colorStyle } from "@/utils/colorStyle"
 import { networkApi, vendorsApi, locationsApi } from '@/api'
 import PaginationBar from '@/components/PaginationBar.vue'
 import { useListQuery } from '@/composables/listQuery'
+import SearchSuggestion from '@/components/SearchSuggestion.vue'
 
 const devices = ref([])
 const deviceTypes = ref([])
 const vendors = ref([])
 const locations = ref([])
 const loading = ref(true)
-const { page, search, setPage, setSearch } = useListQuery({ onChange: loadDevices })
+const { page, search, setPage, setSearch, suggestion, reportCount } = useListQuery({ onChange: loadDevices })
+
+// Take the offered spelling. setSearch only syncs the URL and the watcher
+// that reloads is suppressed because search.value already holds the new
+// term, so load directly.
+function applySuggestion(word) {
+  search.value = word
+  setSearch(word)
+  loadDevices()
+}
 const selectedType = ref(null)
 const vendorFilter = ref('')
 const locationFilter = ref('')
@@ -220,6 +231,7 @@ async function loadDevices() {
 
     const response = await networkApi.list(params)
     devices.value = response.data.data || []
+    reportCount(devices.value.length)
     totalPages.value = response.data.meta?.pagination?.totalpages || response.data.meta?.pagination?.total_pages || 1
   } catch (error) {
     console.error('Error loading network devices:', error)