feat(search): ✨ add auto complete in advanced search

components/search/Advance.vue

@@ -326,19 +326,11 @@ function search(): void {
 
         <!-- TODO: add OR function -->
         <div class="flex justify-between space-x-2 items-center">
-          <!-- <div class="whitespace-nowrap">
-            {{ '包含关键字：' }}
-          </div> -->
-          <!-- TODO: Use autocomplete -->
-          <PFormInput v-model="searchContentAndOrNot" type="text" label="包含关键字：" />
+          <SearchCombo v-model:query="searchContentAndOrNot" :search-function="addsearchContentAndOrNot" class="w-full z-52" placeholder="包含关键字：" :show-poplar-tags="false" />
         </div>
 
         <div class="flex justify-between space-x-6 items-center">
-          <!-- <div class="whitespace-nowrap">
-            {{ '排除标签：' }}
-          </div> -->
-          <!-- TODO: Use autocomplete -->
-          <PFormInput v-model="exceptContent" type="text" label="排除标签：" />
+          <SearchCombo v-model:query="exceptContent" :search-function="addexceptContent" class="w-full z-51" placeholder="排除标签：" :show-poplar-tags="false" />
         </div>
 
         <div class="flex justify-between space-x-6 items-center">

components/search/Combo.vue

@@ -1,9 +1,23 @@
 <script lang="ts" setup>
 import type { Query } from '@/composables/graphql'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   query?: string
+  placeholder?: string
+  searchFunction?: Function
+  showPoplarTags?: boolean
+}>(), {
+  query: '',
+  placeholder: '搜索你想看的内容',
+  showPoplarTags: true,
+})
+const emit = defineEmits<{
+  (event: 'update:query', value: boolean): void
 }>()
+const query = useVModel(props, 'query', emit)
+if (query.value)
+  query.value += ' '
+const cursor = ref(query.value.length)
 
 const router = useRouter()
 
@@ -89,9 +103,6 @@ const popularTags = computed<ComboTag[]>(() =>
       }
     }) || [])
 
-const query = ref(`${props.query} ` || '')
-const cursor = ref(query.value.length)
-
 const queryKeywordStart = computed(() => {
   const text = query
   let i: number = cursor.value
@@ -170,8 +181,12 @@ watchThrottled(queryKeyword, (value) => {
 }, { throttle: 500, leading: false, trailing: true })
 
 const completes = computed<ComboTag[]>(() => {
-  if (queryKeyword.value === '')
-    return popularTags.value
+  if (queryKeyword.value === '') {
+    if (props.showPoplarTags)
+      return popularTags.value
+    else
+      return []
+  }
   if (!queryData.value?.length)
     return []
 
@@ -226,6 +241,10 @@ const active = ref(-1)
 const activeCombo = computed(() => completesWithKeyword.value[active.value])
 
 function search() {
+  if (props.searchFunction) {
+    props.searchFunction()
+    return
+  }
   query.value = query.value.trim()
   router.push({ path: '/search', query: { q: query.value } })
 }
@@ -300,7 +319,7 @@ function onComboClick(index?: number) {
         ref="inputEl"
         v-model="query"
         class="focus:outline-none w-full ml-4 py-1 dark:bg-gray-800"
-        placeholder="搜索你想看的内容"
+        :placeholder="props.placeholder"
         @focus="() => inFocus = true"
         @keydown="onKeyDown"
         @keyup="(e) => cursor = (e.target as HTMLInputElement).selectionStart || 0"

components/toolbar/Top.vue

@@ -7,7 +7,7 @@ const route = useRoute()
 
 const showSlider = ref(false)
 
-const query = computed(() => pickFirstQuery(route.query.q) || '')
+const query = ref(pickFirstQuery(route.query.q) || '')
 </script>
 
 <template>
@@ -18,7 +18,7 @@ const query = computed(() => pickFirstQuery(route.query.q) || '')
 
       <!-- Center -->
       <div class="flex-auto max-w-xl min-w-0">
-        <SearchCombo :query="query" />
+        <SearchCombo v-model:query="query" />
       </div>
 
       <!-- End -->