filter input

src/modules/07_insignia/components/report/Report_02.vue

@@ -40,6 +40,7 @@ onMounted(async () => {
 const splitterModel = ref(14);
 const selectList = ref<any>();
 const optionsList = ref<any>([{ id: 0, name: "เลือกกรอบการยื่นขอ" }]);
+const filterOtion = ref<any>([]);
 
 const nextPage = () => {
   if (page.value < numOfPages.value) {
@@ -65,6 +66,7 @@ const fecthlistRound = async () => {
         year: e.period_year,
         name: e.period_name,
       }));
+   filterOtion.value = optionsList.value
     })
     .catch((err) => {
       messageError($q, err);
@@ -130,6 +132,18 @@ const downloadReport = async (
       hideLoader();
     });
 };
+const filterSelector = (val: any, update: Function, name: any) => {
+  update(() => {
+    const needle = val.toLowerCase();
+    if (name === 'selectList') {
+      filterOtion.value = optionsList.value.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
+
+    }
+  )
+}
 </script>
 
 <template>
@@ -152,19 +166,23 @@ const downloadReport = async (
         <q-toolbar style="padding: 0">
           <q-form ref="myForm" class="row items-center">
             <q-select
+              style="width: 400px;"
               class="q-pa-none"
               use-input
               fill-input
               hide-selected
               dense
+              lazy-rules
               outlined
               v-model="selectList"
-              :options="optionsList"
+              :options="filterOtion"
               label="เลือกรอบ"
               option-value="id"
               option-label="name"
               :rules="[(val) => !!val || 'กรุณาเลือกรอบ']"
               @update:model-value="updateSelect"
+              @filter="(inputValue:any,doneFn:Function) => 
+                filterSelector(inputValue, doneFn,'selectList') "
             />
           </q-form>
           <q-space />