ฟิลเตอร์การลา

src/modules/05_leave/views/AddPage.vue

@@ -79,6 +79,20 @@ function onSubmit(postData: FormData, isLeave: boolean = true) {
   }
 }
 
+const option = ref<any[]>(dataStore.options);
+/**
+ * function ค้นหาข้อมูลใน option
+ * @param val คำค้นหา
+ * @param update function
+ */
+function filterOptionFn(val: string, update: Function) {
+  update(() => {
+    option.value = dataStore.options.filter(
+      (e: any) => e.name.search(val) !== -1
+    );
+  });
+}
+
 onMounted(async () => {
   if (dataStore.options.length == 0) {
     await fectOptionType();
@@ -103,7 +117,7 @@ onMounted(async () => {
         <div>สร้างใบลา</div>
       </div>
 
-      <q-form ref="myform" >
+      <q-form ref="myform">
         <q-card bordered>
           <div class="row q-col-gutter-md q-pa-md">
             <div class="col-xs-12 col-sm-12">
@@ -124,7 +138,7 @@ onMounted(async () => {
                     class="col-12 col-sm-6 col-md-4 inputgreen"
                     outlined
                     v-model="model"
-                    :options="dataStore.options"
+                    :options="option"
                     option-value="code"
                     option-label="name"
                     emit-value
@@ -135,7 +149,16 @@ onMounted(async () => {
                         (modelSpecific = ''),
                         dataStore.fetchProfile()
                     "
-                  />
+                    use-input
+                    @filter="filterOptionFn"
+                  >
+                    <template v-slot:no-option>
+                      <q-item>
+                        <q-item-section class="text-grey">
+                          ไม่มีข้อมูล
+                        </q-item-section>
+                      </q-item>
+                    </template></q-select>
                 </div>
 
                 <div class="row q-mt-sm">