fix: keyword no autocomplete

Services/client/src/components/FileForm.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
 
-const storesKeyword = ['test1', 'test2', 'test3', 'test4', 'test5']
-const storesCategory = ['Category1', 'Category2', 'Category3', 'Category4', 'Category5']
+const storesCategory = [
+  'Category1',
+  'Category2',
+  'Category3',
+  'Category4',
+  'Category5',
+]
 
-const filterDataKeyword = ref(storesKeyword)
 const filterDataCategory = ref(storesCategory)
-const inputKeyword = ref<string[]>([])
-const inputCategory = ref<string[]>([])
 
 const props = withDefaults(
   defineProps<{
@@ -27,6 +29,9 @@ const props = withDefaults(
   }
 )
 
+const inputKeyword = ref<string[]>(props.keyword || [])
+const inputCategory = ref<string[]>(props.category || [])
+
 const emit = defineEmits([
   'update:open',
   'update:title',
@@ -67,31 +72,16 @@ function submit() {
 function createkeyword(val, done) {
   if (val.length > 2) {
     if (!inputKeyword.value.includes(val)) {
-      inputKeyword.value.push(val)
       done(val, 'add-unique')
       console.log(inputKeyword.value)
     }
   }
 }
 
-function filterkeyword(val, update) {
-  update(() => {
-    if (val === '') {
-      filterDataKeyword.value = storesKeyword
-    } else {
-      const needle = val.toLowerCase()
-      filterDataKeyword.value = storesKeyword.filter(
-        (v) => v.toLowerCase().indexOf(needle) > -1
-      )
-    }
-  })
-}
-
 function createCategory(val, done) {
   if (val.length > 2) {
     if (!inputCategory.value.includes(val)) {
       done(val, 'add-unique')
-
     }
   }
 }
@@ -179,6 +169,7 @@ const file = ref<File | undefined>()
           class="q-my-sm"
           placeholder="กรอกชื่อเรื่อง"
           :model-value="title"
+          :rules="[(v) => v.length > 3 || 'ชื่อต้องยาวกว่า 3 ตัวอักษร']"
           @update:model-value="(v) => $emit('update:title', v)"
         />
       </section>
@@ -197,7 +188,7 @@ const file = ref<File | undefined>()
       </section>
 
       <section class="q-mb-md">
-        <span class="text-weight-bold">กลุ่ม/หมวดหมู่</span> 
+        <span class="text-weight-bold">กลุ่ม/หมวดหมู่</span>
         <div class="q-mt-md">
           <q-select
             outlined
@@ -226,22 +217,16 @@ const file = ref<File | undefined>()
         <div class="q-mt-md">
           <q-select
             outlined
-            :model-value="keyword"
             use-input
             use-chips
             multiple
+            hide-dropdown-icon
             input-debounce="0"
-            @new-value="createkeyword"
-            :options="filterDataKeyword"
-            @filter="filterkeyword"
             style="width: 250px"
+            :model-value="props.keyword"
             @update:model-value="(v) => $emit('update:keyword', v)"
+            @new-value="createkeyword"
           >
-            <template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey"> No results </q-item-section>
-              </q-item>
-            </template>
           </q-select>
         </div>
       </section>