src/components/common/VnLocation.vue

@@ -135,16 +135,19 @@ function showLabel(data){
         auto-load
         url="Countries"
     />
+    <!-- @input-value="filter"
+    :default-filter="false" -->
     <VnSelectCreate
         v-model="value"
         :options="postcodesOptions"
         :label="t('Location')"
-        :option-label="showLabel"
+        option-label="code"
         v-bind="$attrs"
         emit-value
         map-options
         use-input
-        @filter="filterHandler"
+        :filter-options="['code','town.name']"
+        :filter-rules="['val.length>2',{code:'.length > 2'}]"
         clearable
         hide-selected
         fill-input

src/components/common/VnSelectFilter.vue

@@ -16,7 +16,11 @@ const $props = defineProps({
         default: '',
     },
     filterOptions: {
-        type: Array,
+        type: [Array, Function],
+        default: () => [],
+    },
+    filterRules: {
+        type: [Array, Function],
         default: () => [],
     },
     isClearable: {
@@ -47,16 +51,46 @@ function setOptions(data) {
     myOptions.value = JSON.parse(JSON.stringify(data));
     myOptionsOriginal.value = JSON.parse(JSON.stringify(data));
 }
+function deepFind(obj, path) {
+  var paths = path.split('.')
+    , current = obj
+    , i;
+
+  for (i = 0; i < paths.length; ++i) {
+    if (current[paths[i]] == undefined) {
+      return undefined;
+    } else {
+      current = current[paths[i]];
+    }
+  }
+  return current;
+}
 setOptions(options.value);
 const filter = (val, options) => {
     const search = val.toString().toLowerCase();
 
     if (!search) return options;
+    if($props.filterRules.length) {
+        const passSomeRule = $props.filterRules.some((rule) => {
+            if(typeof rule === 'object') return true
+            const cond = eval(rule)
+            return cond;
+        });
+        if(!passSomeRule) return options
+    }
 
     return options.filter((row) => {
         if ($props.filterOptions.length) {
             return $props.filterOptions.some((prop) => {
-                const propValue = String(row[prop]).toLowerCase();
+                const passRules = $props.filterRules
+                .filter(rule=>typeof rule === 'object')
+                .every(rule=>{
+                    const propExists = Object.keys(rule).includes(prop);
+                    if(!propExists) return false;
+                    return eval(prop.concat(rule[prop]))
+                });
+                const propValue = String(deepFind(row,prop)).toLowerCase();
+                if(passRules)
                 return propValue.includes(search);
             });
         }