diff --git a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
index 5996edee9..797cdfcfe 100644
--- a/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
+++ b/src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
@@ -7,7 +7,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useRoute } from "vue-router";
 import DialogHistory from "@/modules/04_registryNew/components/detail/PersonalInformation/04_FamilyHistory.vue";
-
+import { useProfileDataStore } from "@/modules/04_registryNew/stores/profile";
 const mixin = useCounterMixin();
 const $q = useQuasar();
 const {
@@ -20,6 +20,7 @@ const {
   date2Thai,
 } = mixin;
 
+const store = useProfileDataStore();
 const route = useRoute();
 const id = ref<string>(route.params.id.toString());
 const dialog = ref<boolean>(false);
@@ -64,7 +65,7 @@ const spouseData = reactive({
 
 const rows = ref<any>([]);
 const historyRows = ref<any>([]);
-
+const prefixFilter = ref([]);
 const childrenData: any = reactive({
   childrens: [],
 });
@@ -233,8 +234,32 @@ function deleteChildren(items: any) {
 }
 
 onMounted(async () => {
+  if (
+    store.Ops.prefixOps.length === 0 ||
+    store.Ops.genderOps.length === 0 ||
+    store.Ops.bloodOps.length === 0 ||
+    store.Ops.statusOps.length === 0 ||
+    store.Ops.religionOps.length === 0
+  ) {
+    await fetchPerson();
+  }
+  prefixFilter.value = store.Ops.prefixOps;
   await fetchData(id.value);
 });
+
+function filterSelector(val: string, update: Function, refData: string) {
+  switch (refData) {
+    case "prefixOps":
+      update(() => {
+        store.Ops.prefixOps = prefixFilter.value.filter(
+          (v: any) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+    default:
+      break;
+  }
+}
 </script>
 
 <template>
@@ -504,12 +529,22 @@ onMounted(async () => {
                   outlined
                   bg-color="white"
                   lazy-rules
+                  hidden-space
                   dense
-                  v-model="fatherData.prefix"
-                  :options="fatherData.optionPrefix"
                   :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
                   label="คำนำหน้าชื่อ"
-                  hidden-space
+                  v-model="fatherData.prefix"
+                  use-input
+                  clearable
+                  input-debounce="0"
+                  emit-value
+                  map-options
+                  :options="store.Ops.prefixOps"
+                  option-label="name"
+                  option-value="name"
+                  @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
                 />
               </div>
               <div class="col">
@@ -625,10 +660,20 @@ onMounted(async () => {
                   lazy-rules
                   dense
                   v-model="motherData.prefix"
-                  :options="motherData.optionPrefix"
                   :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
                   label="คำนำหน้าชื่อ"
                   hidden-space
+                  use-input
+                  clearable
+                  input-debounce="0"
+                  emit-value
+                  map-options
+                  :options="store.Ops.prefixOps"
+                  option-label="name"
+                  option-value="name"
+                  @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
                 />
               </div>
               <div class="col">
@@ -744,10 +789,20 @@ onMounted(async () => {
                   lazy-rules
                   dense
                   v-model="spouseData.prefix"
-                  :options="spouseData.optionPrefix"
                   :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
                   label="คำนำหน้าชื่อ"
                   hidden-space
+                  use-input
+                  clearable
+                  input-debounce="0"
+                  emit-value
+                  map-options
+                  :options="store.Ops.prefixOps"
+                  option-label="name"
+                  option-value="name"
+                  @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
                 />
               </div>
               <div class="col">
@@ -857,8 +912,18 @@ onMounted(async () => {
                       bg-color="white"
                       v-model="items.childrenPrefix"
                       :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
-                      :options="childrenOptionPrefix"
                       label="คำนำหน้าชื่อ"
+                      use-input
+                      clearable
+                      input-debounce="0"
+                      emit-value
+                      map-options
+                      :options="store.Ops.prefixOps"
+                      option-label="name"
+                      option-value="name"
+                      @filter="(inputValue:string,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'prefixOps'
+                      ) "
                     />
                   </div>
                   <div class="col">