เพิ่ม filter ใน selecter

-พ้นราชการ
-ออกคำสั่ง

src/modules/06_retirement/views/Main.vue

@@ -21,6 +21,9 @@ const router = useRouter();
 const $q = useQuasar(); //ใช้ noti quasar
 
 const fiscalyear = ref<number>();
+const yearOptionsFilter = ref<any>({
+  yearOptions: [],
+});
 const actionOption = ref<resMain[]>([]);
 
 const visibleColumns = ref<string[]>([
@@ -69,15 +72,19 @@ const columns = ref<QTableProps["columns"]>([
 // ข้อมูลตาราง (จำลอง)
 const currentYear = new Date().getFullYear();
 const rows = ref<resMain[]>([]);
-const yearOptions = reactive<any[]>([]);
+const yearOptions = ref<any[]>([]);
 
 onMounted(() => {
   filteryear();
 });
 // หาปีปัจจุบัน
 const filteryear = () => {
-  yearOptions.push({ id: currentYear, name: currentYear + 543 });
-  fiscalyear.value = yearOptions[0].id;
+  yearOptions.value = [{ id: currentYear, name: currentYear + 543 }];
+  yearOptions.value.push({ id: currentYear, name: currentYear + 543 });
+  //   fiscalyear.value = yearOptions[0].id;
+
+  yearOptionsFilter.value = [{ id: currentYear, name: currentYear + 543 }];
+  yearOptionsFilter.value.push({ id: currentYear, name: currentYear + 543 });
   fetchRetirement(type.value, currentYear);
 };
 // ประกาศเกษียณอายุราชการ
@@ -136,6 +143,15 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
+
+const filterSelector = (val: any, update: Function, year: any) => {
+  update(() => {
+    yearOptions.value = yearOptionsFilter.value.filter(
+      (v: any) => v.name.toLowerCase().indexOf(val.toLowerCase()) > -1
+    );
+  });
+};
+
 const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
@@ -209,8 +225,12 @@ const typeReportChangeName = (val: string) => {
                 :readonly="false"
                 :borderless="false"
                 :outlined="true"
+                use-input
                 :hide-dropdown-icon="false"
                 style="min-width: 150px"
+                @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'yearOptions'
+                      ) "
               />
               <div>
                 <popupAdd