filter input

src/modules/07_insignia/components/4_Allocate/DialogForm.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, watch,onMounted } from "vue";
 import { QForm, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import DialogHeader from "@/components/DialogHeader.vue";
@@ -14,6 +14,7 @@ const routeName = router.currentRoute.value.name;
 const amount = ref<number | null>();
 const Org = ref<string | null>("");
 const grandCross = ref<string | null>("");
+const filterInsigniaOp = ref<any>()
 const closeModal = () => {
   props.close();
 };
@@ -41,7 +42,22 @@ watch(props, () => {
     amount.value = null;
   }
 });
+watch(() => props.insigniaList, (newVal) => {
+      filterInsigniaOp.value = newVal;
+    });
+    const filterSelector = (val: any, update: Function, name: any) => {
+  update(() => {
+    const needle = val.toLowerCase();
+    if (name === 'filterInsigniaOp') {
+      grandCross.value = null
+      filterInsigniaOp.value = props.insigniaList.filter(
+          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+        );
+    }
 
+    }
+  )
+}
 const clickSave = () => {
   if (myForm.value !== null) {
     myForm.value.validate().then(async (success) => {
@@ -67,12 +83,14 @@ const clickSave = () => {
             <div class="col-6">
               <q-select
                 hide-bottom-space
-                :options="insigniaList"
+                :options="filterInsigniaOp"
                 dense
                 borderless
+                use-input
+                lazy-rules
                 option-label="name"
                 option-value="id"
-                emit-value
+                emit-valuez
                 map-options
                 outlined
                 options-cover
@@ -83,6 +101,8 @@ const clickSave = () => {
                     ? `เครื่องราชฯ`
                     : `เลือกหน่วยงาน`
                 "
+                @filter="(inputValue:any,doneFn:Function) => 
+                filterSelector(inputValue, doneFn,'filterInsigniaOp') "
               />
             </div>
             <div class="col-xs-12 col-sm-6">

src/modules/07_insignia/components/4_Allocate/Main.vue

@@ -176,7 +176,7 @@ watch(tab, () => {
   if (!a) {
     DataStore.insignia = "";
   }
-  filterInsigniaOp.value = insigniaOp.value
+   filterInsigniaOp.value = insigniaOp.value
   fecthlistInsignia();
 });