[Manager] Add suggestions to search (#3041)

src/components/dialog/content/manager/ManagerDialogContent.vue

@@ -32,6 +32,7 @@
             v-model:searchQuery="searchQuery"
             v-model:searchMode="searchMode"
             :searchResults="searchResults"
+            :suggestions="suggestions"
           />
           <div class="flex-1 overflow-auto">
             <div
@@ -141,8 +142,14 @@ const tabs = ref<TabItem[]>([
 ])
 const selectedTab = ref<TabItem>(tabs.value[0])
 
-const { searchQuery, pageNumber, isLoading, searchResults, searchMode } =
-  useRegistrySearch()
+const {
+  searchQuery,
+  pageNumber,
+  isLoading,
+  searchResults,
+  searchMode,
+  suggestions
+} = useRegistrySearch()
 pageNumber.value = 0
 
 const isInitialLoad = computed(

src/components/dialog/content/manager/registrySearchBar/RegistrySearchBar.vue

@@ -1,15 +1,29 @@
 <template>
   <div class="relative w-full p-6">
     <div class="flex items-center w-full">
-      <IconField class="w-5/12">
-        <InputIcon class="pi pi-search" />
-        <InputText
-          v-model="searchQuery"
-          :placeholder="$t('manager.searchPlaceholder')"
-          class="w-full rounded-2xl"
-          autofocus
-        />
-      </IconField>
+      <AutoComplete
+        v-model.lazy="searchQuery"
+        :suggestions="suggestions || []"
+        :placeholder="$t('manager.searchPlaceholder')"
+        :complete-on-focus="false"
+        :delay="8"
+        optionLabel="query"
+        class="w-full"
+        @complete="stubTrue"
+        @option-select="onOptionSelect"
+        :pt="{
+          pcInputText: {
+            root: {
+              autofocus: true,
+              class: 'w-5/12 rounded-2xl'
+            }
+          },
+          loader: {
+            style: 'display: none'
+          }
+        }"
+      >
+      </AutoComplete>
     </div>
     <div class="flex mt-3 text-sm">
       <div class="flex gap-6 ml-1">
@@ -34,18 +48,21 @@
 </template>
 
 <script setup lang="ts">
-import IconField from 'primevue/iconfield'
-import InputIcon from 'primevue/inputicon'
-import InputText from 'primevue/inputtext'
+import { stubTrue } from 'lodash'
+import AutoComplete, {
+  AutoCompleteOptionSelectEvent
+} from 'primevue/autocomplete'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import SearchFilterDropdown from '@/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue'
+import type { NodesIndexSuggestion } from '@/services/algoliaSearchService'
 import type { PackField, SearchOption } from '@/types/comfyManagerTypes'
 import { components } from '@/types/comfyRegistryTypes'
 
-const props = defineProps<{
+const { searchResults } = defineProps<{
   searchResults?: components['schemas']['Node'][]
+  suggestions?: NodesIndexSuggestion[]
 }>()
 
 const searchQuery = defineModel<string>('searchQuery')
@@ -55,7 +72,7 @@ const sortField = defineModel<PackField>('sortField', { default: 'downloads' })
 const { t } = useI18n()
 
 const hasResults = computed(
-  () => searchQuery.value?.trim() && props.searchResults?.length
+  () => searchQuery.value?.trim() && searchResults?.length
 )
 
 const sortOptions: SearchOption<PackField>[] = [
@@ -68,4 +85,8 @@ const filterOptions: SearchOption<string>[] = [
   { id: 'packs', label: t('manager.filter.nodePack') },
   { id: 'nodes', label: t('g.nodes') }
 ]
+
+const onOptionSelect = (event: AutoCompleteOptionSelectEvent) => {
+  searchQuery.value = event.value.query
+}
 </script>