From 8af4b5eabb91df233f0e0f60e8c460e1075907f4 Mon Sep 17 00:00:00 2001
From: davidjumani <dj.davidjumani1994@gmail.com>
Date: Wed, 4 Aug 2021 17:50:22 +0530
Subject: [PATCH 1/4] ui: Fetching all records in list* API

---
 ui/src/api/index.js | 77 +++++++++++++++++++++++++++++++++++++++------
 1 file changed, 68 insertions(+), 9 deletions(-)

diff --git a/ui/src/api/index.js b/ui/src/api/index.js
index 6c4818ae8058..e371bda36391 100644
--- a/ui/src/api/index.js
+++ b/ui/src/api/index.js
@@ -17,7 +17,7 @@
 
 import { axios } from '@/utils/request'
 
-export function api (command, args = {}, method = 'GET', data = {}) {
+export async function api (command, args = {}, method = 'GET', data = {}) {
   let params = {}
   args.command = command
   args.response = 'json'
@@ -29,14 +29,73 @@ export function api (command, args = {}, method = 'GET', data = {}) {
     })
   }
 
-  return axios({
-    params: {
-      ...args
-    },
-    url: '/',
-    method,
-    data: params || {}
-  })
+  const exemptedAPIs = ['listLdapConfigurations', 'listCapabilities', 'listIdps', 'listApis', 'listInfrastructure', 'listAndSwitchSamlAccount']
+
+  if ('page' in args || exemptedAPIs.includes(command) || !command.startsWith('list')) {
+    return axios({
+      params: {
+        ...args
+      },
+      url: '/',
+      method,
+      data: params || {}
+    })
+  }
+
+  const pagesize = 10
+  let page = 1
+  let items = []
+  let done = false
+  let response = null
+
+  while (!done) {
+    args.page = page
+    args.pagesize = pagesize
+    await axios({
+      params: {
+        ...args
+      },
+      url: '/',
+      method,
+      data: params || {}
+    }).then(json => {
+      var responseName
+      var objectName
+      for (const key in json) {
+        if (key.includes('response')) {
+          responseName = key
+          break
+        }
+      }
+      for (const key in json[responseName]) {
+        if (key === 'count') {
+          continue
+        }
+        objectName = key
+        break
+      }
+      if (json[responseName][objectName]) {
+        items = items.concat(json[responseName][objectName])
+        console.log(command, page, responseName, objectName, items.length, json[responseName].count, 'WIP')
+      }
+      if (!json[responseName].count || json[responseName].count === items.length || !json[responseName][objectName]) {
+        console.log(command, page, responseName, objectName, items.length, json[responseName].count, 'DONE')
+        done = true
+        json[responseName][objectName] = items
+        console.log(json)
+        response = new Promise((resolve) => {
+          resolve(json)
+        })
+        return
+      }
+      page++
+    }).catch(error => {
+      response = new Promise((resolve, reject) => {
+        reject(error)
+      })
+    })
+  }
+  return response
 }
 
 export function login (arg) {

From 70b3a79831dd299d9078bc9783e6617ec5e8c60f Mon Sep 17 00:00:00 2001
From: davidjumani <dj.davidjumani1994@gmail.com>
Date: Wed, 4 Aug 2021 19:49:11 +0530
Subject: [PATCH 2/4] ui: Allow searching in dropdowns

---
 .../components/header/SamlDomainSwitcher.vue  |  5 ++
 ui/src/components/view/DedicateDomain.vue     | 10 ++-
 ui/src/components/view/FormView.vue           |  7 ++-
 ui/src/components/view/SearchView.vue         |  5 ++
 ui/src/views/AutogenView.vue                  | 17 ++++-
 ui/src/views/auth/Login.vue                   |  8 ++-
 ui/src/views/compute/AssignInstance.vue       | 46 ++++++++++++--
 ui/src/views/compute/AttachIso.vue            |  7 ++-
 ui/src/views/compute/CreateSnapshotWizard.vue |  8 ++-
 ui/src/views/compute/DeployVM.vue             | 17 ++++-
 ui/src/views/compute/DestroyVM.vue            |  7 ++-
 ui/src/views/compute/InstanceTab.vue          | 23 +++++--
 ui/src/views/compute/MigrateVMStorage.vue     |  7 ++-
 ui/src/views/compute/backup/FormSchedule.vue  | 14 +++++
 .../compute/wizard/MultiDiskSelection.vue     |  7 ++-
 .../compute/wizard/MultiNetworkSelection.vue  |  7 ++-
 ui/src/views/iam/AddAccount.vue               | 29 +++++++--
 ui/src/views/iam/AddLdapAccount.vue           | 41 +++++++++---
 ui/src/views/iam/AddUser.vue                  | 29 +++++++--
 ui/src/views/iam/ConfigureSamlSsoAuth.vue     |  7 ++-
 ui/src/views/iam/CreateRole.vue               | 14 ++++-
 ui/src/views/iam/DomainActionForm.vue         | 12 +++-
 ui/src/views/iam/EditUser.vue                 |  8 ++-
 ui/src/views/iam/ImportRole.vue               |  7 ++-
 ui/src/views/iam/PermissionEditable.vue       |  7 ++-
 .../views/image/RegisterOrUploadTemplate.vue  | 28 +++++++--
 .../image/UpdateTemplateIsoPermissions.vue    | 31 ++++++++--
 ui/src/views/infra/AddPrimaryStorage.vue      | 62 ++++++++++++++++---
 ui/src/views/infra/AddSecondaryStorage.vue    | 12 +++-
 ui/src/views/infra/ClusterAdd.vue             | 27 +++++++-
 ui/src/views/infra/HostAdd.vue                | 34 ++++++++--
 ui/src/views/infra/MigrateData.vue            | 18 +++++-
 ui/src/views/infra/PodAdd.vue                 |  7 ++-
 .../views/infra/network/DedicatedVLANTab.vue  | 28 +++++++--
 .../views/infra/network/EditTrafficLabel.vue  |  7 ++-
 .../infra/network/IpRangesTabManagement.vue   |  6 +-
 .../views/infra/network/IpRangesTabPublic.vue | 22 ++++++-
 .../infra/network/IpRangesTabStorage.vue      |  6 +-
 .../infra/network/ServiceProvidersTab.vue     |  7 ++-
 .../network/providers/AddF5LoadBalancer.vue   |  7 ++-
 .../providers/AddNetscalerLoadBalancer.vue    |  7 ++-
 .../network/providers/AddPaloAltoFirewall.vue |  7 ++-
 .../network/providers/AddSrxFirewall.vue      |  7 ++-
 ui/src/views/infra/zone/StaticInputsForm.vue  |  6 +-
 .../ZoneWizardPhysicalNetworkSetupStep.vue    | 20 +++++-
 .../infra/zone/ZoneWizardZoneDetailsStep.vue  | 19 ++++--
 ui/src/views/network/AclListRulesTab.vue      | 24 ++++++-
 ui/src/views/network/CreateVlanIpRange.vue    |  6 +-
 ui/src/views/network/CreateVpc.vue            | 14 ++++-
 .../network/CreateVpnCustomerGateway.vue      | 49 ++++++++++++---
 ui/src/views/network/EgressRulesTab.vue       | 10 ++-
 ui/src/views/network/EnableStaticNat.vue      | 14 ++++-
 ui/src/views/network/FirewallRules.vue        | 10 ++-
 .../network/IngressEgressRuleConfigure.vue    |  7 ++-
 .../views/network/InternalLBAssignVmForm.vue  |  6 +-
 ui/src/views/network/IpAddressesTab.vue       | 12 +++-
 ui/src/views/network/LoadBalancing.vue        | 56 ++++++++++++++---
 ui/src/views/network/PortForwarding.vue       | 22 ++++++-
 ui/src/views/network/VpcTab.vue               | 26 +++++++-
 ui/src/views/network/VpcTiersTab.vue          | 21 ++++++-
 ui/src/views/offering/AddComputeOffering.vue  |  7 ++-
 ui/src/views/offering/AddDiskOffering.vue     |  7 ++-
 .../views/offering/ImportBackupOffering.vue   | 15 ++++-
 .../project/AddAccountOrUserToProject.vue     | 30 ++++++---
 ui/src/views/storage/AttachVolume.vue         |  7 ++-
 .../storage/CreateSnapshotFromVMSnapshot.vue  |  6 +-
 ui/src/views/storage/CreateVolume.vue         | 13 +++-
 ui/src/views/storage/FormSchedule.vue         | 22 +++++--
 ui/src/views/storage/MigrateVolume.vue        | 16 ++++-
 ui/src/views/storage/ResizeVolume.vue         |  6 +-
 .../storage/RestoreAttachBackupVolume.vue     | 15 ++++-
 ui/src/views/storage/UploadLocalVolume.vue    | 14 ++++-
 72 files changed, 981 insertions(+), 171 deletions(-)

diff --git a/ui/src/components/header/SamlDomainSwitcher.vue b/ui/src/components/header/SamlDomainSwitcher.vue
index c19319438351..30c158337194 100644
--- a/ui/src/components/header/SamlDomainSwitcher.vue
+++ b/ui/src/components/header/SamlDomainSwitcher.vue
@@ -22,6 +22,11 @@
       :loading="loading"
       :defaultValue="currentAccount"
       :value="currentAccount"
+      showSearch
+      optionFilterProp="children"
+      :filterOption="(input, option) => {
+        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }"
       @change="changeAccount"
       @focus="fetchData" >
 
diff --git a/ui/src/components/view/DedicateDomain.vue b/ui/src/components/view/DedicateDomain.vue
index 3cdd80434ad9..91634fd801d7 100644
--- a/ui/src/components/view/DedicateDomain.vue
+++ b/ui/src/components/view/DedicateDomain.vue
@@ -21,7 +21,15 @@
       <a-spin :spinning="domainsLoading">
         <p class="form__label">{{ $t('label.domain') }}<span class="required">*</span></p>
         <p class="required required-label">{{ $t('label.required') }}</p>
-        <a-select style="width: 100%" @change="handleChangeDomain" v-model="domainId">
+        <a-select
+          style="width: 100%"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }"
+          @change="handleChangeDomain"
+          v-model="domainId">
           <a-select-option v-for="(domain, index) in domainsList" :value="domain.id" :key="index">
             {{ domain.path || domain.name || domain.description }}
           </a-select-option>
diff --git a/ui/src/components/view/FormView.vue b/ui/src/components/view/FormView.vue
index 020f280b5407..76a16bec69a5 100644
--- a/ui/src/components/view/FormView.vue
+++ b/ui/src/components/view/FormView.vue
@@ -52,8 +52,11 @@
                 rules: [{ required: field.required, message: `${this.$t('message.error.select')}` }]
               }]"
               :placeholder="field.description"
-
-            >
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
                 {{ opt.name || opt.description }}
               </a-select-option>
diff --git a/ui/src/components/view/SearchView.vue b/ui/src/components/view/SearchView.vue
index 0c27e400ecf8..fefd573d3f97 100644
--- a/ui/src/components/view/SearchView.vue
+++ b/ui/src/components/view/SearchView.vue
@@ -56,6 +56,11 @@
                   v-decorator="[field.name, {
                     initialValue: fieldValues[field.name] || null
                   }]"
+                  showSearch
+                  optionFilterProp="children"
+                  :filterOption="(input, option) => {
+                    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  }"
                   :loading="field.loading">
                   <a-select-option
                     v-for="(opt, idx) in field.opts"
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index 24a966d50777..8ddb37b4bf85 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -49,7 +49,12 @@
                     ['Admin', 'DomainAdmin'].includes($store.getters.userInfo.roletype) && ['vm', 'iso', 'template'].includes($route.name)
                     ? 'all' : ['guestnetwork'].includes($route.name) ? 'all' : 'self')"
                   style="min-width: 100px; margin-left: 10px"
-                  @change="changeFilter">
+                  @change="changeFilter"
+                  showSearch
+                  optionFilterProp="children"
+                  :filterOption="(input, option) => {
+                    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  }" >
                   <a-icon slot="suffixIcon" type="filter" />
                   <a-select-option v-if="['Admin', 'DomainAdmin'].includes($store.getters.userInfo.roletype) && ['vm', 'iso', 'template'].includes($route.name)" key="all">
                     {{ $t('label.all') }}
@@ -211,6 +216,11 @@
                   }]"
                   :placeholder="field.description"
                   :autoFocus="fieldIndex === firstIndex"
+                  showSearch
+                  optionFilterProp="children"
+                  :filterOption="(input, option) => {
+                    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  }"
                 >
                   <a-select-option key="" >{{ }}</a-select-option>
                   <a-select-option v-for="(opt, optIndex) in currentAction.mapping[field.name].options" :key="optIndex">
@@ -270,6 +280,11 @@
                   }]"
                   :placeholder="field.description"
                   :autoFocus="fieldIndex === firstIndex"
+                  showSearch
+                  optionFilterProp="children"
+                  :filterOption="(input, option) => {
+                    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  }"
                 >
                   <a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
                     {{ opt.name && opt.type ? opt.name + ' (' + opt.type + ')' : opt.name || opt.description }}
diff --git a/ui/src/views/auth/Login.vue b/ui/src/views/auth/Login.vue
index 6966d5a5b229..620effe66230 100644
--- a/ui/src/views/auth/Login.vue
+++ b/ui/src/views/auth/Login.vue
@@ -87,7 +87,13 @@
           {{ $t('label.login.single.signon') }}
         </span>
         <a-form-item>
-          <a-select v-decorator="['idp', { initialValue: selectedIdp } ]">
+          <a-select
+            v-decorator="['idp', { initialValue: selectedIdp } ]"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="(idp, idx) in idps" :key="idx" :value="idp.id">
               {{ idp.orgName }}
             </a-select-option>
diff --git a/ui/src/views/compute/AssignInstance.vue b/ui/src/views/compute/AssignInstance.vue
index 23da3e2e85dd..085c53fae79d 100644
--- a/ui/src/views/compute/AssignInstance.vue
+++ b/ui/src/views/compute/AssignInstance.vue
@@ -29,7 +29,15 @@
 
       <div class="form__item">
         <p class="form__label">{{ $t('label.accounttype') }}</p>
-        <a-select v-model="selectedAccountType" defaultValue="account" autoFocus>
+        <a-select
+          v-model="selectedAccountType"
+          defaultValue="account"
+          autoFocus
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option :value="$t('label.account')">{{ $t('label.account') }}</a-select-option>
           <a-select-option :value="$t('label.project')">{{ $t('label.project') }}</a-select-option>
         </a-select>
@@ -37,7 +45,15 @@
 
       <div class="form__item">
         <p class="form__label"><span class="required">*</span>{{ $t('label.domain') }}</p>
-        <a-select @change="changeDomain" v-model="selectedDomain" :defaultValue="selectedDomain">
+        <a-select
+          @change="changeDomain"
+          v-model="selectedDomain"
+          :defaultValue="selectedDomain"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option v-for="domain in domains" :key="domain.name" :value="domain.id">
             {{ domain.path || domain.name || domain.description }}
           </a-select-option>
@@ -47,7 +63,14 @@
       <template v-if="selectedAccountType === 'Account'">
         <div class="form__item">
           <p class="form__label"><span class="required">*</span>{{ $t('label.account') }}</p>
-          <a-select @change="changeAccount" v-model="selectedAccount">
+          <a-select
+            @change="changeAccount"
+            v-model="selectedAccount"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="account in accounts" :key="account.name" :value="account.name">
               {{ account.name }}
             </a-select-option>
@@ -59,7 +82,14 @@
       <template v-else>
         <div class="form__item">
           <p class="form__label"><span class="required">*</span>{{ $t('label.project') }}</p>
-          <a-select @change="changeProject" v-model="selectedProject">
+          <a-select
+            @change="changeProject"
+            v-model="selectedProject"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="project in projects" :key="project.id" :value="project.id">
               {{ project.name }}
             </a-select-option>
@@ -70,7 +100,13 @@
 
       <div class="form__item">
         <p class="form__label">{{ $t('label.network') }}</p>
-        <a-select v-model="selectedNetwork">
+        <a-select
+          v-model="selectedNetwork"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option v-for="network in networks" :key="network.id" :value="network.id">
             {{ network.name ? network.name : '-' }}
           </a-select-option>
diff --git a/ui/src/views/compute/AttachIso.vue b/ui/src/views/compute/AttachIso.vue
index 39a5e7331eab..b4c52e22caf5 100644
--- a/ui/src/views/compute/AttachIso.vue
+++ b/ui/src/views/compute/AttachIso.vue
@@ -28,7 +28,12 @@
               initialValue: this.selectedIso,
               rules: [{ required: true, message: `${this.$t('label.required')}`}]
             }]"
-            autoFocus>
+            autoFocus
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="iso in isos" :key="iso.id">
               {{ iso.displaytext || iso.name }}
             </a-select-option>
diff --git a/ui/src/views/compute/CreateSnapshotWizard.vue b/ui/src/views/compute/CreateSnapshotWizard.vue
index 7cba128be3c1..af2765f44b09 100644
--- a/ui/src/views/compute/CreateSnapshotWizard.vue
+++ b/ui/src/views/compute/CreateSnapshotWizard.vue
@@ -25,14 +25,18 @@
         <a-form-item>
           <tooltip-label slot="label" :title="$t('label.volumeid')" :tooltip="apiParams.volumeid.description"/>
           <a-select
-            showSearch
             allowClear
             v-decorator="['volumeid', {
               rules: [{ required: true, message: $t('message.error.select') }]
             }]"
             @change="onChangeVolume"
             :placeholder="apiParams.volumeid.description"
-            autoFocus>
+            autoFocus
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option
               v-for="volume in listVolumes"
               :key="volume.id">
diff --git a/ui/src/views/compute/DeployVM.vue b/ui/src/views/compute/DeployVM.vue
index 670f3201d3ef..fff6d30a4fbf 100644
--- a/ui/src/views/compute/DeployVM.vue
+++ b/ui/src/views/compute/DeployVM.vue
@@ -142,7 +142,10 @@
                               rules: [{ required: true, message: `${this.$t('message.error.select')}` }]
                             }]"
                             :options="hypervisorSelectOptions"
-                            @change="value => this.hypervisor = value" />
+                            @change="value => this.hypervisor = value"
+                            showSearch
+                            optionFilterProp="children"
+                            :filterOption="filterOption" />
                         </a-form-item>
                       </p>
                     </a-card>
@@ -483,7 +486,9 @@
                           :autoFocus="vm.templateid && ['KVM', 'VMware'].includes(hypervisor) && !template.deployasis"
                           v-decorator="['boottype']"
                           @change="fetchBootModes"
-                        >
+                          showSearch
+                          optionFilterProp="children"
+                          :filterOption="filterOption" >
                           <a-select-option v-for="bootType in options.bootTypes" :key="bootType.id">
                             {{ bootType.description }}
                           </a-select-option>
@@ -491,7 +496,10 @@
                       </a-form-item>
                       <a-form-item :label="$t('label.bootmode')">
                         <a-select
-                          v-decorator="['bootmode']">
+                          v-decorator="['bootmode']"
+                          showSearch
+                          optionFilterProp="children"
+                          :filterOption="filterOption" >
                           <a-select-option v-for="bootMode in options.bootModes" :key="bootMode.id">
                             {{ bootMode.description }}
                           </a-select-option>
@@ -555,6 +563,9 @@
                       <a-select
                         v-decorator="['keyboard']"
                         :options="keyboardSelectOptions"
+                        showSearch
+                        optionFilterProp="children"
+                        :filterOption="filterOption"
                       ></a-select>
                     </a-form-item>
                     <a-form-item :label="$t('label.action.start.instance')">
diff --git a/ui/src/views/compute/DestroyVM.vue b/ui/src/views/compute/DestroyVM.vue
index 6df78b0ed6d3..8cd8d8dfc0e7 100644
--- a/ui/src/views/compute/DestroyVM.vue
+++ b/ui/src/views/compute/DestroyVM.vue
@@ -35,7 +35,12 @@
             :placeholder="$t('label.delete.volumes')"
             mode="multiple"
             :loading="loading"
-            :autoFocus="$store.getters.userInfo.roletype !== 'Admin' && !$store.getters.features.allowuserexpungerecovervm">
+            :autoFocus="$store.getters.userInfo.roletype !== 'Admin' && !$store.getters.features.allowuserexpungerecovervm"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="volume in volumes" :key="volume.id">
               {{ volume.name }}
             </a-select-option>
diff --git a/ui/src/views/compute/InstanceTab.vue b/ui/src/views/compute/InstanceTab.vue
index fc8bc6f4e0e0..30233e65cf09 100644
--- a/ui/src/views/compute/InstanceTab.vue
+++ b/ui/src/views/compute/InstanceTab.vue
@@ -155,7 +155,12 @@
           <a-select
             :defaultValue="addNetworkData.network"
             @change="e => addNetworkData.network = e"
-            autoFocus>
+            autoFocus
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option
               v-for="network in addNetworkData.allNetworks"
               :key="network.id"
@@ -189,11 +194,15 @@
         <div class="modal-form">
           <p class="modal-form__label">{{ $t('label.publicip') }}:</p>
           <a-select
-            showSearch
             v-if="editNicResource.type==='Shared'"
             v-model="editIpAddressValue"
             :loading="listIps.loading"
-            :autoFocus="editNicResource.type==='Shared'">
+            :autoFocus="editNicResource.type==='Shared'"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="ip in listIps.opts" :key="ip.ipaddress">
               {{ ip.ipaddress }}
             </a-select-option>
@@ -228,11 +237,15 @@
       <div class="modal-form">
         <p class="modal-form__label">{{ $t('label.publicip') }}:</p>
         <a-select
-          showSearch
           v-if="editNicResource.type==='Shared'"
           v-model="newSecondaryIp"
           :loading="listIps.loading"
-          :autoFocus="editNicResource.type==='Shared'">
+          :autoFocus="editNicResource.type==='Shared'"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option v-for="ip in listIps.opts" :key="ip.ipaddress">
             {{ ip.ipaddress }}
           </a-select-option>
diff --git a/ui/src/views/compute/MigrateVMStorage.vue b/ui/src/views/compute/MigrateVMStorage.vue
index f8e7c0ebbee6..80d644dccd16 100644
--- a/ui/src/views/compute/MigrateVMStorage.vue
+++ b/ui/src/views/compute/MigrateVMStorage.vue
@@ -28,7 +28,12 @@
             :loading="loading"
             v-decorator="['storageid', {
               rules: [{ required: true, message: `${this.$t('message.error.required.input')}` }]
-            }]">
+            }]"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="storagePool in storagePools" :key="storagePool.id">
               {{ storagePool.name || storagePool.id }}
             </a-select-option>
diff --git a/ui/src/views/compute/backup/FormSchedule.vue b/ui/src/views/compute/backup/FormSchedule.vue
index 6310806ca70a..d816f2b8f486 100644
--- a/ui/src/views/compute/backup/FormSchedule.vue
+++ b/ui/src/views/compute/backup/FormSchedule.vue
@@ -85,6 +85,11 @@
             <a-col :md="24" :lg="12" v-if="intervalType==='weekly'">
               <a-form-item :label="$t('label.day.of.week')">
                 <a-select
+                  showSearch
+                  optionFilterProp="children"
+                  :filterOption="(input, option) => {
+                    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  }"
                   v-decorator="['day-of-week', {
                     rules: [{
                       required: true,
@@ -100,6 +105,11 @@
             <a-col :md="24" :lg="12" v-if="intervalType==='monthly'">
               <a-form-item :label="$t('label.day.of.month')">
                 <a-select
+                  showSearch
+                  optionFilterProp="children"
+                  :filterOption="(input, option) => {
+                    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  }"
                   v-decorator="['day-of-month', {
                     rules: [{
                       required: true,
@@ -116,6 +126,10 @@
               <a-form-item :label="$t('label.timezone')">
                 <a-select
                   showSearch
+                  optionFilterProp="children"
+                  :filterOption="(input, option) => {
+                    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  }"
                   v-decorator="['timezone', {
                     rules: [{
                       required: true,
diff --git a/ui/src/views/compute/wizard/MultiDiskSelection.vue b/ui/src/views/compute/wizard/MultiDiskSelection.vue
index 166f4c386605..b3f126937b1e 100644
--- a/ui/src/views/compute/wizard/MultiDiskSelection.vue
+++ b/ui/src/views/compute/wizard/MultiDiskSelection.vue
@@ -49,7 +49,12 @@
           <a-select
             v-else
             @change="updateOfferingSelect($event, record.id)"
-            :defaultValue="validOfferings[record.id][0].id">
+            :defaultValue="validOfferings[record.id][0].id"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="offering in validOfferings[record.id]" :key="offering.id">
               {{ offering.displaytext }}
             </a-select-option>
diff --git a/ui/src/views/compute/wizard/MultiNetworkSelection.vue b/ui/src/views/compute/wizard/MultiNetworkSelection.vue
index f94cc2bbef21..f4750af63bd2 100644
--- a/ui/src/views/compute/wizard/MultiNetworkSelection.vue
+++ b/ui/src/views/compute/wizard/MultiNetworkSelection.vue
@@ -38,7 +38,12 @@
         <a-select
           v-if="validNetworks[record.id] && validNetworks[record.id].length > 0"
           :defaultValue="validNetworks[record.id][0].id"
-          @change="val => handleNetworkChange(record, val)">
+          @change="val => handleNetworkChange(record, val)"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option v-for="network in validNetworks[record.id]" :key="network.id">
             {{ network.displaytext + (network.broadcasturi ? ' (' + network.broadcasturi + ')' : '') }}
           </a-select-option>
diff --git a/ui/src/views/iam/AddAccount.vue b/ui/src/views/iam/AddAccount.vue
index e85e28f0e6bf..80fe37f80322 100644
--- a/ui/src/views/iam/AddAccount.vue
+++ b/ui/src/views/iam/AddAccount.vue
@@ -27,7 +27,12 @@
               rules: [{ required: true, message: $t('message.error.select') }] }]"
             :loading="roleLoading"
             :placeholder="apiParams.roleid.description"
-            autoFocus>
+            autoFocus
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="role in roles" :key="role.id">
               {{ role.name + ' (' + role.type + ')' }}
             </a-select-option>
@@ -103,7 +108,12 @@
             v-decorator="['domainid', {
               initialValue: selectedDomain,
               rules: [{ required: true, message: $t('message.error.select') }] }]"
-            :placeholder="apiParams.domainid.description">
+            :placeholder="apiParams.domainid.description"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="domain in domainsList" :key="domain.id">
               {{ domain.path || domain.name || domain.description }}
             </a-select-option>
@@ -116,10 +126,14 @@
         <a-form-item>
           <tooltip-label slot="label" :title="$t('label.timezone')" :tooltip="apiParams.timezone.description"/>
           <a-select
-            showSearch
             v-decorator="['timezone']"
             :loading="timeZoneLoading"
-            :placeholder="apiParams.timezone.description">
+            :placeholder="apiParams.timezone.description"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="opt in timeZoneMap" :key="opt.id">
               {{ opt.name || opt.description }}
             </a-select-option>
@@ -141,7 +155,12 @@
               v-decorator="['samlentity', {
                 initialValue: selectedIdp,
               }]"
-              :loading="idpLoading">
+              :loading="idpLoading"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option v-for="(idp, idx) in idps" :key="idx">
                 {{ idp.orgName }}
               </a-select-option>
diff --git a/ui/src/views/iam/AddLdapAccount.vue b/ui/src/views/iam/AddLdapAccount.vue
index 0ef32d52ee29..74b29e168953 100644
--- a/ui/src/views/iam/AddLdapAccount.vue
+++ b/ui/src/views/iam/AddLdapAccount.vue
@@ -50,7 +50,15 @@
             @submit="handleSubmit"
             layout="vertical" >
             <a-form-item :label="$t('label.filterby')">
-              <a-select @change="fetchListLdapUsers" v-model="selectedFilter" autoFocus >
+              <a-select
+                @change="fetchListLdapUsers"
+                v-model="selectedFilter"
+                autoFocus
+                showSearch
+                optionFilterProp="children"
+                :filterOption="(input, option) => {
+                  return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                }" >
                 <a-select-option v-for="opt in filters" :key="opt.id" >
                   {{ opt.name }}
                 </a-select-option>
@@ -58,13 +66,17 @@
             </a-form-item>
             <a-form-item :label="$t('label.domain')">
               <a-select
-                showSearch
                 v-decorator="['domainid', {
                   rules: [{ required: true, memessage: `${this.$t('message.error.select')}` }]
                 }]"
                 :placeholder="apiParams.domainid.description"
                 :loading="domainLoading"
-                @change="fetchListLdapUsers($event)" >
+                @change="fetchListLdapUsers($event)"
+                showSearch
+                optionFilterProp="children"
+                :filterOption="(input, option) => {
+                  return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                }" >
                 <a-select-option v-for="opt in listDomains" :key="opt.name">
                   {{ opt.name }}
                 </a-select-option>
@@ -78,12 +90,16 @@
             </a-form-item>
             <a-form-item :label="$t('label.role')">
               <a-select
-                showSearch
                 v-decorator="['roleid', {
                   rules: [{ required: true, message: `${this.$t('message.error.select')}` }]
                 }]"
                 :placeholder="apiParams.roleid.description"
-                :loading="roleLoading">
+                :loading="roleLoading"
+                showSearch
+                optionFilterProp="children"
+                :filterOption="(input, option) => {
+                  return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                }" >
                 <a-select-option v-for="opt in listRoles" :key="opt.name">
                   {{ opt.name }}
                 </a-select-option>
@@ -91,10 +107,14 @@
             </a-form-item>
             <a-form-item :label="$t('label.timezone')">
               <a-select
-                showSearch
                 v-decorator="['timezone']"
                 :placeholder="apiParams.timezone.description"
-                :loading="timeZoneLoading">
+                :loading="timeZoneLoading"
+                showSearch
+                optionFilterProp="children"
+                :filterOption="(input, option) => {
+                  return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                }" >
                 <a-select-option v-for="opt in timeZoneMap" :key="opt.id">
                   {{ opt.name || opt.description }}
                 </a-select-option>
@@ -123,7 +143,12 @@
                     rules: [{ required: samlEnable, message: `${this.$t('message.error.select')}` }]
                   }]"
                   :placeholder="$t('label.choose.saml.indentity')"
-                  :loading="loading">
+                  :loading="loading"
+                  showSearch
+                  optionFilterProp="children"
+                  :filterOption="(input, option) => {
+                    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  }" >
                   <a-select-option v-for="(idp, idx) in listIdps" :key="idx">
                     {{ idp.orgName }}
                   </a-select-option>
diff --git a/ui/src/views/iam/AddUser.vue b/ui/src/views/iam/AddUser.vue
index 0b74fd16002d..5205e99752a0 100644
--- a/ui/src/views/iam/AddUser.vue
+++ b/ui/src/views/iam/AddUser.vue
@@ -88,7 +88,12 @@
           <a-select
             :loading="domainLoading"
             v-decorator="['domainid']"
-            :placeholder="apiParams.domainid.description">
+            :placeholder="apiParams.domainid.description"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="domain in domainsList" :key="domain.id">
               {{ domain.path || domain.name || domain.description }}
             </a-select-option>
@@ -101,7 +106,12 @@
               rules: [{ required: true, message: $t('message.error.required.input') }]
             }]"
             :loading="loadingAccount"
-            :placeholder="apiParams.account.description">
+            :placeholder="apiParams.account.description"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="(item, idx) in accountList" :key="idx">
               {{ item.name }}
             </a-select-option>
@@ -110,9 +120,13 @@
         <a-form-item>
           <tooltip-label slot="label" :title="$t('label.timezone')" :tooltip="apiParams.timezone.description"/>
           <a-select
-            showSearch
             v-decorator="['timezone']"
-            :loading="timeZoneLoading">
+            :loading="timeZoneLoading"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="opt in timeZoneMap" :key="opt.id">
               {{ opt.name || opt.description }}
             </a-select-option>
@@ -128,7 +142,12 @@
               v-decorator="['samlentity', {
                 initialValue: selectedIdp,
               }]"
-              :loading="idpLoading">
+              :loading="idpLoading"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option v-for="(idp, idx) in idps" :key="idx">
                 {{ idp.orgName }}
               </a-select-option>
diff --git a/ui/src/views/iam/ConfigureSamlSsoAuth.vue b/ui/src/views/iam/ConfigureSamlSsoAuth.vue
index e375ad588ccd..715a0d136c34 100644
--- a/ui/src/views/iam/ConfigureSamlSsoAuth.vue
+++ b/ui/src/views/iam/ConfigureSamlSsoAuth.vue
@@ -32,7 +32,12 @@
         <a-select
           v-decorator="['samlEntity', {
             initialValue: selectedIdp,
-          }]">
+          }]"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option v-for="(idp, idx) in idps" :key="idx">
             {{ idp.orgName }}
           </a-select-option>
diff --git a/ui/src/views/iam/CreateRole.vue b/ui/src/views/iam/CreateRole.vue
index 7fa7231c080a..34a8897ee88f 100644
--- a/ui/src/views/iam/CreateRole.vue
+++ b/ui/src/views/iam/CreateRole.vue
@@ -62,7 +62,12 @@
             v-decorator="['type', {
               rules: [{ required: true, message: $t('message.error.select') }]
             }]"
-            :placeholder="apiParams.type.description">
+            :placeholder="apiParams.type.description"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="role in defaultRoles" :key="role">
               {{ role }}
             </a-select-option>
@@ -75,7 +80,12 @@
             v-decorator="['roleid', {
               rules: [{ required: true, message: $t('message.error.select') }]
             }]"
-            :placeholder="apiParams.roleid.description">
+            :placeholder="apiParams.roleid.description"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option
               v-for="role in roles"
               :value="role.id"
diff --git a/ui/src/views/iam/DomainActionForm.vue b/ui/src/views/iam/DomainActionForm.vue
index 1d2a5ea504f8..b3803d7ff8ed 100644
--- a/ui/src/views/iam/DomainActionForm.vue
+++ b/ui/src/views/iam/DomainActionForm.vue
@@ -63,7 +63,11 @@
                 }]"
                 :placeholder="field.description"
                 :autoFocus="fieldIndex === firstIndex"
-              >
+                showSearch
+                optionFilterProp="children"
+                :filterOption="(input, option) => {
+                  return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                }" >
                 <a-select-option v-for="(opt, optIndex) in action.mapping[field.name].options" :key="optIndex">
                   {{ opt }}
                 </a-select-option>
@@ -98,7 +102,11 @@
                 }]"
                 :placeholder="field.description"
                 :autoFocus="fieldIndex === firstIndex"
-              >
+                showSearch
+                optionFilterProp="children"
+                :filterOption="(input, option) => {
+                  return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                }" >
                 <a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
                   {{ opt.name && opt.type ? opt.name + ' (' + opt.type + ')' : opt.name || opt.description }}
                 </a-select-option>
diff --git a/ui/src/views/iam/EditUser.vue b/ui/src/views/iam/EditUser.vue
index 60f9350a9814..5a7f26f910e2 100644
--- a/ui/src/views/iam/EditUser.vue
+++ b/ui/src/views/iam/EditUser.vue
@@ -61,9 +61,13 @@
         <a-form-item>
           <tooltip-label slot="label" :title="$t('label.timezone')" :tooltip="apiParams.timezone.description"/>
           <a-select
-            showSearch
             v-decorator="['timezone']"
-            :loading="timeZoneLoading">
+            :loading="timeZoneLoading"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="opt in timeZoneMap" :key="opt.id">
               {{ opt.name || opt.description }}
             </a-select-option>
diff --git a/ui/src/views/iam/ImportRole.vue b/ui/src/views/iam/ImportRole.vue
index c29fc9116f5e..26a1ca65cc18 100644
--- a/ui/src/views/iam/ImportRole.vue
+++ b/ui/src/views/iam/ImportRole.vue
@@ -69,7 +69,12 @@
             v-decorator="['type', {
               rules: [{ required: true, message: $t('message.error.select') }]
             }]"
-            :placeholder="apiParams.type.description">
+            :placeholder="apiParams.type.description"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="role in defaultRoles" :key="role">
               {{ role }}
             </a-select-option>
diff --git a/ui/src/views/iam/PermissionEditable.vue b/ui/src/views/iam/PermissionEditable.vue
index f7905d53f6db..d538939af776 100644
--- a/ui/src/views/iam/PermissionEditable.vue
+++ b/ui/src/views/iam/PermissionEditable.vue
@@ -19,7 +19,12 @@
   <a-select
     :value="defaultValue"
     @change="handleChange"
-    autoFocus>
+    autoFocus
+    showSearch
+    optionFilterProp="children"
+    :filterOption="(input, option) => {
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    }" >
     <a-select-option value="allow">{{ $t('label.allow') }}</a-select-option>
     <a-select-option value="deny">{{ $t('label.deny') }}</a-select-option>
   </a-select>
diff --git a/ui/src/views/image/RegisterOrUploadTemplate.vue b/ui/src/views/image/RegisterOrUploadTemplate.vue
index d4843b9adfb3..38afbec05699 100644
--- a/ui/src/views/image/RegisterOrUploadTemplate.vue
+++ b/ui/src/views/image/RegisterOrUploadTemplate.vue
@@ -158,7 +158,12 @@
                 }]"
                 :loading="hyperVisor.loading"
                 :placeholder="apiParams.hypervisor.description"
-                @change="handlerSelectHyperVisor">
+                @change="handlerSelectHyperVisor"
+                showSearch
+                optionFilterProp="children"
+                :filterOption="(input, option) => {
+                  return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                }" >
                 <a-select-option v-for="(opt, optIndex) in hyperVisor.opts" :key="optIndex">
                   {{ opt.name || opt.description }}
                 </a-select-option>
@@ -177,7 +182,12 @@
                   ]
                 }]"
                 :placeholder="apiParams.format.description"
-                @change="val => { selectedFormat = val }">
+                @change="val => { selectedFormat = val }"
+                showSearch
+                optionFilterProp="children"
+                :filterOption="(input, option) => {
+                  return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                }" >
                 <a-select-option v-for="opt in format.opts" :key="opt.id">
                   {{ opt.name || opt.description }}
                 </a-select-option>
@@ -234,7 +244,12 @@
                   ]
                 }]"
                 :loading="rootDisk.loading"
-                :placeholder="$t('label.rootdiskcontrollertype')">
+                :placeholder="$t('label.rootdiskcontrollertype')"
+                showSearch
+                optionFilterProp="children"
+                :filterOption="(input, option) => {
+                  return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                }" >
                 <a-select-option v-for="opt in rootDisk.opts" :key="opt.id">
                   {{ opt.name || opt.description }}
                 </a-select-option>
@@ -252,7 +267,12 @@
                     }
                   ]
                 }]"
-                :placeholder="$t('label.keyboard')">
+                :placeholder="$t('label.keyboard')"
+                showSearch
+                optionFilterProp="children"
+                :filterOption="(input, option) => {
+                  return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                }" >
                 <a-select-option v-for="opt in keyboardType.opts" :key="opt.id">
                   {{ opt.name || opt.description }}
                 </a-select-option>
diff --git a/ui/src/views/image/UpdateTemplateIsoPermissions.vue b/ui/src/views/image/UpdateTemplateIsoPermissions.vue
index a07a6bece0a0..b341b39c5fad 100644
--- a/ui/src/views/image/UpdateTemplateIsoPermissions.vue
+++ b/ui/src/views/image/UpdateTemplateIsoPermissions.vue
@@ -27,7 +27,12 @@
         v-model="selectedOperation"
         :defaultValue="$t('label.add')"
         @change="fetchData"
-        autoFocus>
+        autoFocus
+        showSearch
+        optionFilterProp="children"
+        :filterOption="(input, option) => {
+          return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        }" >
         <a-select-option :value="$t('label.add')">{{ $t('label.add') }}</a-select-option>
         <a-select-option :value="$t('label.remove')">{{ $t('label.remove') }}</a-select-option>
         <a-select-option :value="$t('label.reset')">{{ $t('label.reset') }}</a-select-option>
@@ -40,7 +45,15 @@
           <span class="required">*</span>
           {{ $t('label.sharewith') }}
         </p>
-        <a-select v-model="selectedShareWith" :defaultValue="$t('label.account')" @change="fetchData">
+        <a-select
+          v-model="selectedShareWith"
+          :defaultValue="$t('label.account')"
+          @change="fetchData"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option :value="$t('label.account')">{{ $t('label.account') }}</a-select-option>
           <a-select-option :value="$t('label.project')">{{ $t('label.project') }}</a-select-option>
         </a-select>
@@ -57,7 +70,12 @@
               placeholder="Select Accounts"
               :value="selectedAccounts"
               @change="handleChange"
-              style="width: 100%">
+              style="width: 100%"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option v-for="account in accountsList" :key="account.name">
                 {{ account.name }}
               </a-select-option>
@@ -79,7 +97,12 @@
             :placeholder="$t('label.select.projects')"
             :value="selectedProjects"
             @change="handleChange"
-            style="width: 100%">
+            style="width: 100%"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="project in projectsList" :key="project.name">
               {{ project.name }}
             </a-select-option>
diff --git a/ui/src/views/infra/AddPrimaryStorage.vue b/ui/src/views/infra/AddPrimaryStorage.vue
index 32bee16982f7..aee89d420a10 100644
--- a/ui/src/views/infra/AddPrimaryStorage.vue
+++ b/ui/src/views/infra/AddPrimaryStorage.vue
@@ -24,7 +24,12 @@
           <a-select
             v-decorator="['scope', { initialValue: 'cluster' }]"
             @change="val => { this.scope = val }"
-            autoFocus>
+            autoFocus
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option :value="'cluster'"> {{ $t('label.clusterid') }} </a-select-option>
             <a-select-option :value="'zone'"> {{ $t('label.zoneid') }} </a-select-option>
           </a-select>
@@ -34,7 +39,12 @@
             <tooltip-label slot="label" :title="$t('label.hypervisor')" :tooltip="apiParams.hypervisor.description"/>
             <a-select
               v-decorator="['hypervisor', { initialValue: hypervisors[0]}]"
-              @change="val => this.selectedHypervisor = val">
+              @change="val => this.selectedHypervisor = val"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option :value="hypervisor" v-for="(hypervisor, idx) in hypervisors" :key="idx">
                 {{ hypervisor }}
               </a-select-option>
@@ -45,7 +55,12 @@
           <tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
           <a-select
             v-decorator="['zone', { initialValue: this.zoneSelected, rules: [{ required: true, message: `${$t('label.required')}`}] }]"
-            @change="val => changeZone(val)">
+            @change="val => changeZone(val)"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option :value="zone.id" v-for="(zone) in zones" :key="zone.id">
               {{ zone.name }}
             </a-select-option>
@@ -56,7 +71,12 @@
             <tooltip-label slot="label" :title="$t('label.podid')" :tooltip="apiParams.podid.description"/>
             <a-select
               v-decorator="['pod', { initialValue: this.podSelected, rules: [{ required: true, message: `${$t('label.required')}`}] }]"
-              @change="val => changePod(val)">
+              @change="val => changePod(val)"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option :value="pod.id" v-for="(pod) in pods" :key="pod.id">
                 {{ pod.name }}
               </a-select-option>
@@ -66,7 +86,12 @@
             <tooltip-label slot="label" :title="$t('label.clusterid')" :tooltip="apiParams.clusterid.description"/>
             <a-select
               v-decorator="['cluster', { initialValue: this.clusterSelected, rules: [{ required: true, message: `${$t('label.required')}`}] }]"
-              @change="val => fetchHypervisor(val)">
+              @change="val => fetchHypervisor(val)"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option :value="cluster.id" v-for="cluster in clusters" :key="cluster.id">
                 {{ cluster.name }}
               </a-select-option>
@@ -77,7 +102,12 @@
           <a-form-item :label="$t('label.hostid')">
             <a-select
               v-decorator="['host', { initialValue: this.hostSelected, rules: [{ required: true, message: `${$t('label.required')}`}] }]"
-              @change="val => this.hostSelected = val">
+              @change="val => this.hostSelected = val"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option :value="host.id" v-for="host in hosts" :key="host.id">
                 {{ host.name }}
               </a-select-option>
@@ -92,7 +122,12 @@
           <tooltip-label slot="label" :title="$t('label.protocol')" :tooltip="$t('message.protocol.description')"/>
           <a-select
             v-decorator="['protocol', { initialValue: this.protocols[0], rules: [{ required: true, message: `${$t('label.required')}`}] }]"
-            @change="val => this.protocolSelected = val">
+            @change="val => this.protocolSelected = val"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option :value="protocol" v-for="(protocol,idx) in protocols" :key="idx">
               {{ protocol }}
             </a-select-option>
@@ -145,7 +180,12 @@
           <tooltip-label slot="label" :title="$t('label.providername')" :tooltip="apiParams.provider.description"/>
           <a-select
             v-decorator="['provider', { initialValue: providerSelected, rules: [{ required: true, message: `${$t('label.required')}`}] }]"
-            @change="updateProviderAndProtocol">
+            @change="updateProviderAndProtocol"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option :value="provider" v-for="(provider,idx) in providers" :key="idx">
               {{ provider }}
             </a-select-option>
@@ -217,7 +257,11 @@
           <a-select
             mode="tags"
             v-model="selectedTags"
-          >
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="tag in storageTags" :key="tag.name">{{ tag.name }}</a-select-option>
           </a-select>
         </a-form-item>
diff --git a/ui/src/views/infra/AddSecondaryStorage.vue b/ui/src/views/infra/AddSecondaryStorage.vue
index 284d8add667c..d369cc3e7c05 100644
--- a/ui/src/views/infra/AddSecondaryStorage.vue
+++ b/ui/src/views/infra/AddSecondaryStorage.vue
@@ -30,7 +30,11 @@
                 initialValue: 'NFS'
               }]"
             @change="val => { this.provider = val }"
-          >
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option
               :value="prov"
               v-for="(prov,idx) in providers"
@@ -48,7 +52,11 @@
                   rules: [{ required: true, message: `${$t('label.required')}`}]
                 }]"
               @change="val => { zoneSelected = val }"
-            >
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option
                 :value="zone.id"
                 v-for="(zone) in zones"
diff --git a/ui/src/views/infra/ClusterAdd.vue b/ui/src/views/infra/ClusterAdd.vue
index e0e78e22239f..7b132e20ef1e 100644
--- a/ui/src/views/infra/ClusterAdd.vue
+++ b/ui/src/views/infra/ClusterAdd.vue
@@ -20,7 +20,15 @@
     <div class="form" v-ctrl-enter="handleSubmitForm">
       <div class="form__item">
         <div class="form__label"><span class="required">* </span>{{ $t('label.zonenamelabel') }}</div>
-        <a-select v-model="zoneId" @change="fetchPods" autoFocus>
+        <a-select
+          v-model="zoneId"
+          @change="fetchPods"
+          autoFocus
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option
             v-for="zone in zonesList"
             :value="zone.id"
@@ -32,7 +40,14 @@
 
       <div class="form__item">
         <div class="form__label">{{ $t('label.hypervisor') }}</div>
-        <a-select v-model="hypervisor" @change="resetAllFields">
+        <a-select
+          v-model="hypervisor"
+          @change="resetAllFields"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option
             v-for="hv in hypervisorsList"
             :value="hv.name"
@@ -44,7 +59,13 @@
 
       <div class="form__item">
         <div class="form__label">{{ $t('label.podname') }}</div>
-        <a-select v-model="podId">
+        <a-select
+          v-model="podId"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option
             v-for="pod in podsList"
             :value="pod.id"
diff --git a/ui/src/views/infra/HostAdd.vue b/ui/src/views/infra/HostAdd.vue
index b8cd28d0be88..4928232985ed 100644
--- a/ui/src/views/infra/HostAdd.vue
+++ b/ui/src/views/infra/HostAdd.vue
@@ -21,7 +21,15 @@
 
       <div class="form__item">
         <div class="form__label"><span class="required">* </span>{{ $t('label.zonenamelabel') }}</div>
-        <a-select v-model="zoneId" @change="fetchPods" autoFocus>
+        <a-select
+          v-model="zoneId"
+          @change="fetchPods"
+          autoFocus
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option
             v-for="zone in zonesList"
             :value="zone.id"
@@ -33,7 +41,14 @@
 
       <div class="form__item">
         <div class="form__label"><span class="required">* </span>{{ $t('label.podname') }}</div>
-        <a-select v-model="podId" @change="fetchClusters">
+        <a-select
+          v-model="podId"
+          @change="fetchClusters"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option
             v-for="pod in podsList"
             :value="pod.id"
@@ -45,7 +60,14 @@
 
       <div class="form__item">
         <div class="form__label"><span class="required">* </span>{{ $t('label.clustername') }}</div>
-        <a-select v-model="clusterId" @change="handleChangeCluster">
+        <a-select
+          v-model="clusterId"
+          @change="handleChangeCluster"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option
             v-for="cluster in clustersList"
             :value="cluster.id"
@@ -95,7 +117,11 @@
           mode="tags"
           :placeholder="placeholder.hosttags"
           v-model="selectedTags"
-        >
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option v-for="tag in hostTagsList" :key="tag.name">{{ tag.name }}</a-select-option>
         </a-select>
       </div>
diff --git a/ui/src/views/infra/MigrateData.vue b/ui/src/views/infra/MigrateData.vue
index affddca4376a..a1cb693bb323 100644
--- a/ui/src/views/infra/MigrateData.vue
+++ b/ui/src/views/infra/MigrateData.vue
@@ -33,7 +33,11 @@
             :loading="loading"
             @change="val => { selectedStore = val }"
             autoFocus
-          >
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option
               v-for="store in imageStores"
               :key="store.id"
@@ -52,7 +56,11 @@
             }]"
             mode="multiple"
             :loading="loading"
-          >
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option
               v-for="store in imageStores"
               v-if="store.id !== selectedStore"
@@ -71,7 +79,11 @@
                 }]
             }]"
             :loading="loading"
-          >
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option value="Complete">{{ $t('label.complete') }}</a-select-option>
             <a-select-option value="Balance">{{ $t('label.balance') }}</a-select-option>
           </a-select>
diff --git a/ui/src/views/infra/PodAdd.vue b/ui/src/views/infra/PodAdd.vue
index 54b1c95a9318..d22a7afa16a9 100644
--- a/ui/src/views/infra/PodAdd.vue
+++ b/ui/src/views/infra/PodAdd.vue
@@ -25,7 +25,12 @@
             initialValue: this.zoneId,
             rules: [{ required: true, message: `${$t('label.required')}` }] }
           ]"
-          autoFocus>
+          autoFocus
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option
             v-for="zone in zonesList"
             :value="zone.id"
diff --git a/ui/src/views/infra/network/DedicatedVLANTab.vue b/ui/src/views/infra/network/DedicatedVLANTab.vue
index d436a96e8261..a7b8237da4df 100644
--- a/ui/src/views/infra/network/DedicatedVLANTab.vue
+++ b/ui/src/views/infra/network/DedicatedVLANTab.vue
@@ -81,7 +81,15 @@
           </a-form-item>
 
           <a-form-item :label="$t('label.scope')">
-            <a-select defaultValue="account" v-model="selectedScope" @change="handleScopeChange">
+            <a-select
+              defaultValue="account"
+              v-model="selectedScope"
+              @change="handleScopeChange"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option value="account">{{ $t('label.account') }}</a-select-option>
               <a-select-option value="project">{{ $t('label.project') }}</a-select-option>
             </a-select>
@@ -93,7 +101,11 @@
               v-decorator="['domain', {
                 rules: [{ required: true, message: `${$t('label.required')}` }]
               }]"
-            >
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option v-for="domain in domains" :key="domain.id" :value="domain.id">{{ domain.path || domain.name || domain.description }}</a-select-option>
             </a-select>
           </a-form-item>
@@ -103,7 +115,11 @@
               v-decorator="['account', {
                 rules: [{ required: true, message: `${$t('label.required')}` }]
               }]"
-            >
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option
                 v-for="account in accounts"
                 :key="account.id"
@@ -118,7 +134,11 @@
               v-decorator="['project', {
                 rules: [{ required: true, message: `${$t('label.required')}` }]
               }]"
-            >
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option
                 v-for="project in projects"
                 :key="project.id"
diff --git a/ui/src/views/infra/network/EditTrafficLabel.vue b/ui/src/views/infra/network/EditTrafficLabel.vue
index 2707140a07f3..706131bc6827 100644
--- a/ui/src/views/infra/network/EditTrafficLabel.vue
+++ b/ui/src/views/infra/network/EditTrafficLabel.vue
@@ -28,7 +28,12 @@
               rules: [{ required: true, message: $t('message.error.select') }] }]"
             :loading="typeLoading"
             :placeholder="apiParams.id.description"
-            @change="onChangeTrafficType">
+            @change="onChangeTrafficType"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="type in trafficTypes" :key="type.id">
               {{ type.traffictype }}
             </a-select-option>
diff --git a/ui/src/views/infra/network/IpRangesTabManagement.vue b/ui/src/views/infra/network/IpRangesTabManagement.vue
index 64049900e4b3..3d04763ffa24 100644
--- a/ui/src/views/infra/network/IpRangesTabManagement.vue
+++ b/ui/src/views/infra/network/IpRangesTabManagement.vue
@@ -85,7 +85,11 @@
             v-decorator="['pod', {
               rules: [{ required: true, message: `${$t('label.required')}` }]
             }]"
-          >
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="item in items" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
           </a-select>
         </a-form-item>
diff --git a/ui/src/views/infra/network/IpRangesTabPublic.vue b/ui/src/views/infra/network/IpRangesTabPublic.vue
index 7e66d691b361..c796524bf4f0 100644
--- a/ui/src/views/infra/network/IpRangesTabPublic.vue
+++ b/ui/src/views/infra/network/IpRangesTabPublic.vue
@@ -122,7 +122,13 @@
         </div>
         <div>
           <div class="list__label">{{ $t('label.domain') }}:</div>
-          <a-select v-model="addAccount.domain">
+          <a-select
+            v-model="addAccount.domain"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option
               v-for="domain in domains"
               :key="domain.id"
@@ -157,7 +163,11 @@
             v-decorator="['podid', {
               rules: [{ required: true, message: `${$t('label.required')}` }]
             }]"
-          >
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="pod in pods" :key="pod.id" :value="pod.id">{{ pod.name }}</a-select-option>
           </a-select>
         </a-form-item>
@@ -201,7 +211,13 @@
               <a-input v-decorator="['account']"></a-input>
             </a-form-item>
             <a-form-item :label="$t('label.domain')" class="form__item">
-              <a-select v-decorator="['domain']">
+              <a-select
+                v-decorator="['domain']"
+                showSearch
+                optionFilterProp="children"
+                :filterOption="(input, option) => {
+                  return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                }" >
                 <a-select-option
                   v-for="domain in domains"
                   :key="domain.id"
diff --git a/ui/src/views/infra/network/IpRangesTabStorage.vue b/ui/src/views/infra/network/IpRangesTabStorage.vue
index 1a40d2cef759..7b6735f7fa41 100644
--- a/ui/src/views/infra/network/IpRangesTabStorage.vue
+++ b/ui/src/views/infra/network/IpRangesTabStorage.vue
@@ -83,7 +83,11 @@
             v-decorator="['pod', {
               rules: [{ required: true, message: `${$t('label.required')}` }]
             }]"
-          >
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="pod in pods" :key="pod.id" :value="pod.id">{{ pod.name }}</a-select-option>
           </a-select>
         </a-form-item>
diff --git a/ui/src/views/infra/network/ServiceProvidersTab.vue b/ui/src/views/infra/network/ServiceProvidersTab.vue
index d829cc175c4b..0410c39e4d28 100644
--- a/ui/src/views/infra/network/ServiceProvidersTab.vue
+++ b/ui/src/views/infra/network/ServiceProvidersTab.vue
@@ -112,7 +112,12 @@
                   }]
                 }]"
                 :loading="field.loading"
-                :placeholder="field.description">
+                :placeholder="field.description"
+                showSearch
+                optionFilterProp="children"
+                :filterOption="(input, option) => {
+                  return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                }" >
                 <a-select-option
                   v-for="(opt, idx) in field.opts"
                   :key="idx">{{ opt.name || opt.description }}</a-select-option>
diff --git a/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue b/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue
index 7db63f62bfd5..0332ad2b15b7 100644
--- a/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue
+++ b/ui/src/views/infra/network/providers/AddF5LoadBalancer.vue
@@ -58,7 +58,12 @@
             <a-select
               v-decorator="['networkdevicetype', {
                 rules: [{ required: true, message: $t('message.error.select') }]
-              }]">
+              }]"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option
                 v-for="opt in networkDeviceType"
                 :key="opt.id">{{ $t(opt.description) }}</a-select-option>
diff --git a/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue b/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue
index d051007d8f49..aa0699acbe87 100644
--- a/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue
+++ b/ui/src/views/infra/network/providers/AddNetscalerLoadBalancer.vue
@@ -58,7 +58,12 @@
             <a-select
               v-decorator="['networkdevicetype', {
                 rules: [{ required: true, message: $t('message.error.select') }]
-              }]">
+              }]"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option
                 v-for="opt in networkDeviceType"
                 :key="opt.id">{{ $t(opt.description) }}</a-select-option>
diff --git a/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue b/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue
index 734d742e8262..fe6a11378d31 100644
--- a/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue
+++ b/ui/src/views/infra/network/providers/AddPaloAltoFirewall.vue
@@ -58,7 +58,12 @@
             <a-select
               v-decorator="['networkdevicetype', {
                 rules: [{ required: true, message: $t('message.error.select') }]
-              }]">
+              }]"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option
                 v-for="opt in networkDeviceType"
                 :key="opt.id">{{ $t(opt.description) }}</a-select-option>
diff --git a/ui/src/views/infra/network/providers/AddSrxFirewall.vue b/ui/src/views/infra/network/providers/AddSrxFirewall.vue
index cf03eb19457c..e50e14f0909f 100644
--- a/ui/src/views/infra/network/providers/AddSrxFirewall.vue
+++ b/ui/src/views/infra/network/providers/AddSrxFirewall.vue
@@ -58,7 +58,12 @@
             <a-select
               v-decorator="['networkdevicetype', {
                 rules: [{ required: true, message: $t('message.error.select') }]
-              }]">
+              }]"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option
                 v-for="opt in networkDeviceType"
                 :key="opt.id">{{ $t(opt.description) }}</a-select-option>
diff --git a/ui/src/views/infra/zone/StaticInputsForm.vue b/ui/src/views/infra/zone/StaticInputsForm.vue
index 0fe0171b0b96..565557f3db87 100644
--- a/ui/src/views/infra/zone/StaticInputsForm.vue
+++ b/ui/src/views/infra/zone/StaticInputsForm.vue
@@ -47,7 +47,11 @@
           }]"
           :allowClear="true"
           :autoFocus="index === 0"
-        >
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option
             v-for="option in field.options"
             :key="option.id"
diff --git a/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue b/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
index b235c98223f2..52f891a15158 100644
--- a/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
+++ b/ui/src/views/infra/zone/ZoneWizardPhysicalNetworkSetupStep.vue
@@ -37,7 +37,11 @@
           style="width: 100%"
           :defaultValue="text"
           @change="value => onCellChange(record.key, 'isolationMethod', value)"
-        >
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option value="VLAN"> VLAN </a-select-option>
           <a-select-option value="VXLAN"> VXLAN </a-select-option>
           <a-select-option value="GRE"> GRE </a-select-option>
@@ -66,7 +70,11 @@
               :defaultValue="trafficLabelSelected"
               @change="val => { trafficLabelSelected = val }"
               style="min-width: 120px;"
-            >
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option
                 v-for="(traffic, index) in availableTrafficToAdd"
                 :value="traffic"
@@ -171,7 +179,13 @@
             <a-input v-decorator="['vlanId']" />
           </a-form-item>
           <a-form-item v-if="isAdvancedZone" :label="$t('label.vswitch.type')">
-            <a-select v-decorator="['vSwitchType']">
+            <a-select
+              v-decorator="['vSwitchType']"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option value="nexusdvs">{{ $t('label.vswitch.type.nexusdvs') }}</a-select-option>
               <a-select-option value="vmwaresvs">{{ $t('label.vswitch.type.vmwaresvs') }}</a-select-option>
               <a-select-option value="vmwaredvs">{{ $t('label.vswitch.type.vmwaredvs') }}</a-select-option>
diff --git a/ui/src/views/infra/zone/ZoneWizardZoneDetailsStep.vue b/ui/src/views/infra/zone/ZoneWizardZoneDetailsStep.vue
index b00d2811184a..d81af54e1f3b 100644
--- a/ui/src/views/infra/zone/ZoneWizardZoneDetailsStep.vue
+++ b/ui/src/views/infra/zone/ZoneWizardZoneDetailsStep.vue
@@ -205,7 +205,6 @@
         has-feedback>
         <a-select
           :loading="hypervisors === null"
-          showSearch
           v-decorator="['hypervisor',{
             rules: [{
               required: true,
@@ -214,7 +213,11 @@
             }]
           }]"
           :placeholder="$t('message.error.hypervisor.type')"
-        >
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option v-for="hypervisor in hypervisors" :key="hypervisor.name">
             {{ hypervisor.name }}
           </a-select-option>
@@ -234,7 +237,11 @@
             }]
           }]"
           :placeholder="$t('message.error.network.offering')"
-        >
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option
             v-for="networkOffering in availableNetworkOfferings"
             :key="networkOffering.id">
@@ -289,7 +296,11 @@
             }]
           }]"
           :placeholder="$t('message.error.select.domain.to.dedicate')"
-        >
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option v-for="dom in domains" :key="dom.id">
             {{ dom.path }}
           </a-select-option>
diff --git a/ui/src/views/network/AclListRulesTab.vue b/ui/src/views/network/AclListRulesTab.vue
index 432eea925741..e5612e0ded4e 100644
--- a/ui/src/views/network/AclListRulesTab.vue
+++ b/ui/src/views/network/AclListRulesTab.vue
@@ -157,13 +157,25 @@
           <a-input v-decorator="['cidrlist']" />
         </a-form-item>
         <a-form-item :label="$t('label.action')">
-          <a-select v-decorator="['action']">
+          <a-select
+            v-decorator="['action']"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option value="allow">{{ $t('label.allow') }}</a-select-option>
             <a-select-option value="deny">{{ $t('label.deny') }}</a-select-option>
           </a-select>
         </a-form-item>
         <a-form-item :label="$t('label.protocol')">
-          <a-select v-decorator="['protocol']">
+          <a-select
+            v-decorator="['protocol']"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option value="tcp">{{ $t('label.tcp') | capitalise }}</a-select-option>
             <a-select-option value="udp">{{ $t('label.udp') | capitalise }}</a-select-option>
             <a-select-option value="icmp">{{ $t('label.icmp') | capitalise }}</a-select-option>
@@ -195,7 +207,13 @@
         </div>
 
         <a-form-item :label="$t('label.traffictype')">
-          <a-select v-decorator="['traffictype']">
+          <a-select
+            v-decorator="['traffictype']"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option value="ingress">{{ $t('label.ingress') }}</a-select-option>
             <a-select-option value="egress">{{ $t('label.egress') }}</a-select-option>
           </a-select>
diff --git a/ui/src/views/network/CreateVlanIpRange.vue b/ui/src/views/network/CreateVlanIpRange.vue
index 154e060efdc0..3639bbd81576 100644
--- a/ui/src/views/network/CreateVlanIpRange.vue
+++ b/ui/src/views/network/CreateVlanIpRange.vue
@@ -31,7 +31,11 @@
                 initialValue: this.pods && this.pods.length > 0 ? this.pods[0].id : '',
                 rules: [{ required: true, message: `${$t('label.required')}` }]
               }]"
-            >
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option v-for="pod in pods" :key="pod.id" :value="pod.id">{{ pod.name }}</a-select-option>
             </a-select>
           </a-form-item>
diff --git a/ui/src/views/network/CreateVpc.vue b/ui/src/views/network/CreateVpc.vue
index dc0436ef1325..069c26aaad90 100644
--- a/ui/src/views/network/CreateVpc.vue
+++ b/ui/src/views/network/CreateVpc.vue
@@ -45,7 +45,12 @@
               initialValue: this.selectedZone,
               rules: [{ required: true, message: `${this.$t('label.required')}`}]
             }]"
-            @change="val => changeZone(val)">
+            @change="val => changeZone(val)"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="zone in zones" :key="zone.id">
               {{ zone.name }}
             </a-select-option>
@@ -71,7 +76,12 @@
             :loading="loadingOffering"
             v-decorator="['vpcofferingid', {
               initialValue: this.selectedOffering,
-              rules: [{ required: true, message: `${this.$t('label.required')}`}]}]">
+              rules: [{ required: true, message: `${this.$t('label.required')}`}]}]"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option :value="offering.id" v-for="offering in vpcOfferings" :key="offering.id">
               {{ offering.name }}
             </a-select-option>
diff --git a/ui/src/views/network/CreateVpnCustomerGateway.vue b/ui/src/views/network/CreateVpnCustomerGateway.vue
index 4a0f6e57f189..b931645ee8b3 100644
--- a/ui/src/views/network/CreateVpnCustomerGateway.vue
+++ b/ui/src/views/network/CreateVpnCustomerGateway.vue
@@ -69,7 +69,12 @@
             {
               initialValue: 'aes128',
             },
-          ]">
+          ]"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option :value="algo" v-for="(algo, idx) in encryptionAlgo" :key="idx">
             {{ algo }}
           </a-select-option>
@@ -82,7 +87,12 @@
             {
               initialValue: 'sha1',
             },
-          ]">
+          ]"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option :value="h" v-for="(h, idx) in hash" :key="idx">
             {{ h }}
           </a-select-option>
@@ -97,7 +107,12 @@
               initialValue: 'ike',
             },
           ]"
-          @change="val => { ikeversion = val }">
+          @change="val => { ikeversion = val }"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option :value="vers" v-for="(vers, idx) in ikeVersions" :key="idx">
             {{ vers }}
           </a-select-option>
@@ -111,7 +126,12 @@
             {
               initialValue: 'Group 5(modp1536)',
             },
-          ]">
+          ]"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option :value="DHGroups[group]" v-for="(group, idx) in Object.keys(DHGroups)" :key="idx">
             <div v-if="group !== ''">
               {{ group+"("+DHGroups[group]+")" }}
@@ -127,7 +147,12 @@
             {
               initialValue: 'aes128',
             },
-          ]">
+          ]"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option :value="algo" v-for="(algo, idx) in encryptionAlgo" :key="idx">
             {{ algo }}
           </a-select-option>
@@ -141,7 +166,12 @@
             {
               initialValue: 'sha1',
             },
-          ]">
+          ]"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option :value="h" v-for="(h, idx) in hash" :key="idx">
             {{ h }}
           </a-select-option>
@@ -155,7 +185,12 @@
             {
               initialValue: 'None',
             },
-          ]">
+          ]"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option :value="DHGroups[group]" v-for="(group, idx) in Object.keys(DHGroups)" :key="idx">
             <div v-if="group === ''">
               {{ DHGroups[group] }}
diff --git a/ui/src/views/network/EgressRulesTab.vue b/ui/src/views/network/EgressRulesTab.vue
index f6d86c767515..cfddfeb3068e 100644
--- a/ui/src/views/network/EgressRulesTab.vue
+++ b/ui/src/views/network/EgressRulesTab.vue
@@ -29,7 +29,15 @@
         </div>
         <div class="form__item">
           <div class="form__label">{{ $t('label.protocol') }}</div>
-          <a-select v-model="newRule.protocol" style="width: 100%;" @change="resetRulePorts">
+          <a-select
+            v-model="newRule.protocol"
+            style="width: 100%;"
+            @change="resetRulePorts"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option value="tcp">{{ $t('label.tcp') | capitalise }}</a-select-option>
             <a-select-option value="udp">{{ $t('label.udp') | capitalise }}</a-select-option>
             <a-select-option value="icmp">{{ $t('label.icmp') | capitalise }}</a-select-option>
diff --git a/ui/src/views/network/EnableStaticNat.vue b/ui/src/views/network/EnableStaticNat.vue
index 598c19c1246c..736d87affd8a 100644
--- a/ui/src/views/network/EnableStaticNat.vue
+++ b/ui/src/views/network/EnableStaticNat.vue
@@ -23,7 +23,12 @@
           autoFocus
           @change="handleTierSelect"
           v-model="vpcTiers"
-          :placeholder="$t('label.select.tier')">
+          :placeholder="$t('label.select.tier')"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option v-for="network in networksList" :key="network.id" :value="network.id">
             {{ network.name }}
           </a-select-option>
@@ -52,7 +57,12 @@
         <a-select
           v-if="nicsList.length && selectedVm && selectedVm === record.id"
           class="nic-select"
-          :defaultValue="selectedNic.ipaddress">
+          :defaultValue="selectedNic.ipaddress"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option
             @click="selectedNic = item"
             v-for="item in nicsList"
diff --git a/ui/src/views/network/FirewallRules.vue b/ui/src/views/network/FirewallRules.vue
index 1b4712665286..a82fa1833947 100644
--- a/ui/src/views/network/FirewallRules.vue
+++ b/ui/src/views/network/FirewallRules.vue
@@ -25,7 +25,15 @@
         </div>
         <div class="form__item">
           <div class="form__label">{{ $t('label.protocol') }}</div>
-          <a-select v-model="newRule.protocol" style="width: 100%;" @change="resetRulePorts">
+          <a-select
+            v-model="newRule.protocol"
+            style="width: 100%;"
+            @change="resetRulePorts"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option value="tcp">{{ $t('label.tcp') }}</a-select-option>
             <a-select-option value="udp">{{ $t('label.udp') }}</a-select-option>
             <a-select-option value="icmp">{{ $t('label.icmp') }}</a-select-option>
diff --git a/ui/src/views/network/IngressEgressRuleConfigure.vue b/ui/src/views/network/IngressEgressRuleConfigure.vue
index d75fa917a26b..bab10d8664ee 100644
--- a/ui/src/views/network/IngressEgressRuleConfigure.vue
+++ b/ui/src/views/network/IngressEgressRuleConfigure.vue
@@ -34,7 +34,12 @@
             autoFocus
             v-model="newRule.protocol"
             style="width: 100%;"
-            @change="resetRulePorts">
+            @change="resetRulePorts"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option value="tcp">{{ $t('label.tcp') | capitalise }}</a-select-option>
             <a-select-option value="udp">{{ $t('label.udp') | capitalise }}</a-select-option>
             <a-select-option value="icmp">{{ $t('label.icmp') | capitalise }}</a-select-option>
diff --git a/ui/src/views/network/InternalLBAssignVmForm.vue b/ui/src/views/network/InternalLBAssignVmForm.vue
index 5611368fb999..ff6894080dee 100644
--- a/ui/src/views/network/InternalLBAssignVmForm.vue
+++ b/ui/src/views/network/InternalLBAssignVmForm.vue
@@ -41,7 +41,11 @@
               v-else-if="!addVmModalNicLoading && iLb.virtualmachineid[index] === vm.id"
               mode="multiple"
               v-model="iLb.vmguestip[index]"
-            >
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option v-for="(nic, nicIndex) in nics[index]" :key="nic" :value="nic">
                 {{ nic }}{{ nicIndex === 0 ? ` (${this.$t('label.primary')})` : null }}
               </a-select-option>
diff --git a/ui/src/views/network/IpAddressesTab.vue b/ui/src/views/network/IpAddressesTab.vue
index c7b9f955b4d4..65c69336f097 100644
--- a/ui/src/views/network/IpAddressesTab.vue
+++ b/ui/src/views/network/IpAddressesTab.vue
@@ -43,7 +43,11 @@
           defaultActiveFirstOption
           :value="vpcTier"
           @change="handleTierSelect"
-        >
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option key="all" value="">
             {{ $t('label.view.all') }}
           </a-select-option>
@@ -123,8 +127,12 @@
           <a-select
             autoFocus
             style="width: 100%;"
+            v-model="acquireIp"
             showSearch
-            v-model="acquireIp">
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option
               v-for="ip in listPublicIpAddress"
               :key="ip.ipaddress">{{ ip.ipaddress }}</a-select-option>
diff --git a/ui/src/views/network/LoadBalancing.vue b/ui/src/views/network/LoadBalancing.vue
index 2a81f1d655b6..4e984e17cd1f 100644
--- a/ui/src/views/network/LoadBalancing.vue
+++ b/ui/src/views/network/LoadBalancing.vue
@@ -38,7 +38,13 @@
       <div class="form">
         <div class="form__item">
           <div class="form__label">{{ $t('label.algorithm') }}</div>
-          <a-select v-model="newRule.algorithm">
+          <a-select
+            v-model="newRule.algorithm"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option value="roundrobin">{{ $t('label.lb.algorithm.roundrobin') }}</a-select-option>
             <a-select-option value="leastconn">{{ $t('label.lb.algorithm.leastconn') }}</a-select-option>
             <a-select-option value="source">{{ $t('label.lb.algorithm.source') }}</a-select-option>
@@ -46,7 +52,14 @@
         </div>
         <div class="form__item">
           <div class="form__label">{{ $t('label.protocol') }}</div>
-          <a-select v-model="newRule.protocol" style="min-width: 100px">
+          <a-select
+            v-model="newRule.protocol"
+            style="min-width: 100px"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option value="tcp-proxy">{{ $t('label.tcp.proxy') }}</a-select-option>
             <a-select-option value="tcp">{{ $t('label.tcp') }}</a-select-option>
             <a-select-option value="udp">{{ $t('label.udp') }}</a-select-option>
@@ -209,7 +222,15 @@
 
       <a-form :form="stickinessPolicyForm" @submit="handleSubmitStickinessForm" class="custom-ant-form">
         <a-form-item :label="$t('label.stickiness.method')">
-          <a-select autoFocus v-decorator="['methodname']" @change="handleStickinessMethodSelectChange">
+          <a-select
+            autoFocus
+            v-decorator="['methodname']"
+            @change="handleStickinessMethodSelectChange"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option value="LbCookie">{{ $t('label.lb.cookie') }}</a-select-option>
             <a-select-option value="AppCookie">{{ $t('label.app.cookie') }}</a-select-option>
             <a-select-option value="SourceBased">{{ $t('label.source.based') }}</a-select-option>
@@ -292,7 +313,13 @@
         </div>
         <div class="edit-rule__item">
           <p class="edit-rule__label">{{ $t('label.algorithm') }}</p>
-          <a-select v-model="editRuleDetails.algorithm">
+          <a-select
+            v-model="editRuleDetails.algorithm"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option value="roundrobin">{{ $t('label.lb.algorithm.roundrobin') }}</a-select-option>
             <a-select-option value="leastconn">{{ $t('label.lb.algorithm.leastconn') }}</a-select-option>
             <a-select-option value="source">{{ $t('label.lb.algorithm.source') }}</a-select-option>
@@ -300,7 +327,13 @@
         </div>
         <div class="edit-rule__item">
           <p class="edit-rule__label">{{ $t('label.protocol') }}</p>
-          <a-select v-model="editRuleDetails.protocol">
+          <a-select
+            v-model="editRuleDetails.protocol"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option value="tcp-proxy">{{ $t('label.tcp.proxy') }}</a-select-option>
             <a-select-option value="tcp">{{ $t('label.tcp') }}</a-select-option>
             <a-select-option value="udp">{{ $t('label.udp') }}</a-select-option>
@@ -333,7 +366,12 @@
             :autoFocus="'vpcid' in resource && !('associatednetworkid' in resource)"
             v-model="selectedTier"
             @change="fetchVirtualMachines()"
-            :placeholder="$t('label.select.tier')" >
+            :placeholder="$t('label.select.tier')"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option
               v-for="tier in tiers.data"
               :loading="tiers.loading"
@@ -368,7 +406,11 @@
               v-else-if="!addVmModalNicLoading && newRule.virtualmachineid[index] === record.id"
               mode="multiple"
               v-model="newRule.vmguestip[index]"
-            >
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option v-for="(nic, nicIndex) in nics[index]" :key="nic" :value="nic">
                 {{ nic }}{{ nicIndex === 0 ? ` (${$t('label.primary')})` : null }}
               </a-select-option>
diff --git a/ui/src/views/network/PortForwarding.vue b/ui/src/views/network/PortForwarding.vue
index 3d65ec57bed3..e9ff6f6fff80 100644
--- a/ui/src/views/network/PortForwarding.vue
+++ b/ui/src/views/network/PortForwarding.vue
@@ -58,7 +58,14 @@
         </div>
         <div class="form__item">
           <div class="form__label">{{ $t('label.protocol') }}</div>
-          <a-select v-model="newRule.protocol" style="width: 100%;">
+          <a-select
+            v-model="newRule.protocol"
+            style="width: 100%;"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option value="tcp">{{ $t('label.tcp') }}</a-select-option>
             <a-select-option value="udp">{{ $t('label.udp') }}</a-select-option>
           </a-select>
@@ -197,7 +204,12 @@
             :autoFocus="'vpcid' in resource && !('associatednetworkid' in resource)"
             v-model="selectedTier"
             @change="fetchVirtualMachines()"
-            :placeholder="$t('label.select.tier')" >
+            :placeholder="$t('label.select.tier')"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option
               v-for="tier in tiers.data"
               :loading="tiers.loading"
@@ -231,7 +243,11 @@
               style="display: block"
               v-else-if="!addVmModalNicLoading && newRule.virtualmachineid === record.id"
               v-model="newRule.vmguestip"
-            >
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option v-for="(nic, nicIndex) in nics" :key="nic" :value="nic">
                 {{ nic }}{{ nicIndex === 0 ? ` (${$t('label.primary')})` : null }}
               </a-select-option>
diff --git a/ui/src/views/network/VpcTab.vue b/ui/src/views/network/VpcTab.vue
index a5e7ff5371c1..7e9690a6da03 100644
--- a/ui/src/views/network/VpcTab.vue
+++ b/ui/src/views/network/VpcTab.vue
@@ -144,7 +144,14 @@
             <p>{{ $t('message.add.new.gateway.to.vpc') }}</p>
             <a-form @submit.prevent="handleGatewayFormSubmit" :form="gatewayForm">
               <a-form-item :label="$t('label.physicalnetworkid')">
-                <a-select v-decorator="['physicalnetwork']" autoFocus>
+                <a-select
+                  v-decorator="['physicalnetwork']"
+                  autoFocus
+                  showSearch
+                  optionFilterProp="children"
+                  :filterOption="(input, option) => {
+                    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  }" >
                   <a-select-option v-for="item in physicalnetworks" :key="item.id" :value="item.id">
                     {{ item.name }}
                   </a-select-option>
@@ -185,7 +192,13 @@
                 <a-checkbox v-decorator="['nat']"></a-checkbox>
               </a-form-item>
               <a-form-item :label="$t('label.aclid')">
-                <a-select v-decorator="['acl']">
+                <a-select
+                  v-decorator="['acl']"
+                  showSearch
+                  optionFilterProp="children"
+                  :filterOption="(input, option) => {
+                    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  }" >
                   <a-select-option v-for="item in networkAcls" :key="item.id" :value="item.id">
                     <strong>{{ item.name }}</strong> ({{ item.description }})
                   </a-select-option>
@@ -276,7 +289,14 @@
           <a-spin :spinning="modals.vpnConnectionLoading">
             <a-form @submit.prevent="handleVpnConnectionFormSubmit" :form="vpnConnectionForm">
               <a-form-item :label="$t('label.vpncustomergatewayid')">
-                <a-select v-decorator="['vpncustomergateway']" autoFocus>
+                <a-select
+                  v-decorator="['vpncustomergateway']"
+                  autoFocus
+                  showSearch
+                  optionFilterProp="children"
+                  :filterOption="(input, option) => {
+                    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  }" >
                   <a-select-option v-for="item in vpncustomergateways" :key="item.id" :value="item.id">
                     {{ item.name }}
                   </a-select-option>
diff --git a/ui/src/views/network/VpcTiersTab.vue b/ui/src/views/network/VpcTiersTab.vue
index 696308bbdf40..571b471bc19f 100644
--- a/ui/src/views/network/VpcTiersTab.vue
+++ b/ui/src/views/network/VpcTiersTab.vue
@@ -173,7 +173,12 @@
           <a-form-item :label="$t('label.networkofferingid')">
             <a-select
               v-decorator="['networkOffering',{rules: [{ required: true, message: `${$t('label.required')}` }]}]"
-              @change="val => { this.handleNetworkOfferingChange(val) }">
+              @change="val => { this.handleNetworkOfferingChange(val) }"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option v-for="item in networkOfferings" :key="item.id" :value="item.id">
                 {{ item.displaytext || item.name || item.description }}
               </a-select-option>
@@ -204,7 +209,12 @@
           <a-form-item :label="$t('label.aclid')">
             <a-select
               v-decorator="['acl',{rules: [{ required: true, message: `${$t('label.required')}` }]}]"
-              @change="val => { this.handleNetworkAclChange(val) }">
+              @change="val => { this.handleNetworkAclChange(val) }"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option v-for="item in networkAclList" :key="item.id" :value="item.id">
                 <strong>{{ item.name }}</strong> ({{ item.description }})
               </a-select-option>
@@ -265,7 +275,12 @@
                 {
                   initialValue: 'Source',
                   rules: [{ required: true, message: `${$t('label.required')}`}]
-                }]">
+                }]"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option v-for="(key, idx) in Object.keys(algorithms)" :key="idx" :value="algorithms[key]">
                 {{ key }}
               </a-select-option>
diff --git a/ui/src/views/offering/AddComputeOffering.vue b/ui/src/views/offering/AddComputeOffering.vue
index eba5d6336772..a4b14331e67c 100644
--- a/ui/src/views/offering/AddComputeOffering.vue
+++ b/ui/src/views/offering/AddComputeOffering.vue
@@ -486,7 +486,12 @@
           <tooltip-label slot="label" :title="$t('label.vmware.storage.polic')" :tooltip="apiParams.storagepolicy.description"/>
           <a-select
             v-decorator="['storagepolicy']"
-            :placeholder="apiParams.storagepolicy.description">
+            :placeholder="apiParams.storagepolicy.description"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="policy in storagePolicies" :key="policy.id">
               {{ policy.name || policy.id }}
             </a-select-option>
diff --git a/ui/src/views/offering/AddDiskOffering.vue b/ui/src/views/offering/AddDiskOffering.vue
index 1d2a4696b731..d81e7a4e5734 100644
--- a/ui/src/views/offering/AddDiskOffering.vue
+++ b/ui/src/views/offering/AddDiskOffering.vue
@@ -321,7 +321,12 @@
           <tooltip-label slot="label" :title="$t('label.vmware.storage.policy')" :tooltip="apiParams.storagepolicy.description"/>
           <a-select
             v-decorator="['storagepolicy']"
-            :placeholder="apiParams.storagepolicy.description">
+            :placeholder="apiParams.storagepolicy.description"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="policy in storagePolicies" :key="policy.id">
               {{ policy.name || policy.id }}
             </a-select-option>
diff --git a/ui/src/views/offering/ImportBackupOffering.vue b/ui/src/views/offering/ImportBackupOffering.vue
index 590a284435e5..f06bc2a0c018 100644
--- a/ui/src/views/offering/ImportBackupOffering.vue
+++ b/ui/src/views/offering/ImportBackupOffering.vue
@@ -39,13 +39,17 @@
       <a-form-item>
         <tooltip-label slot="label" :title="$t('label.zoneid')" :tooltip="apiParams.zoneid.description"/>
         <a-select
-          showSearch
           allowClear
           v-decorator="['zoneid', {
             rules: [{ required: true, message: `${this.$t('message.error.select')}` }]
           }]"
           :loading="zones.loading"
-          @change="onChangeZone">
+          @change="onChangeZone"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option v-for="zone in zones.opts" :key="zone.name">
             {{ zone.name }}
           </a-select-option>
@@ -58,7 +62,12 @@
           v-decorator="['externalid', {
             rules: [{ required: true, message: `${this.$t('message.error.select')}` }]
           }] "
-          :loading="externals.loading">
+          :loading="externals.loading"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option v-for="opt in externals.opts" :key="opt.id">
             {{ opt.name }}
           </a-select-option>
diff --git a/ui/src/views/project/AddAccountOrUserToProject.vue b/ui/src/views/project/AddAccountOrUserToProject.vue
index 9e293fe699ac..b7fe75d18838 100644
--- a/ui/src/views/project/AddAccountOrUserToProject.vue
+++ b/ui/src/views/project/AddAccountOrUserToProject.vue
@@ -41,11 +41,14 @@
           <a-form-item v-if="apiParams.addAccountToProject.projectroleid">
             <tooltip-label slot="label" :title="$t('label.project.role')" :tooltip="apiParams.addAccountToProject.projectroleid.description"/>
             <a-select
-              showSearch
               v-decorator="['projectroleid']"
               :loading="loading"
               :placeholder="$t('label.project.role')"
-            >
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option v-for="role in projectRoles" :key="role.id">
                 {{ role.name }}
               </a-select-option>
@@ -54,9 +57,13 @@
           <a-form-item v-if="apiParams.addAccountToProject.roletype">
             <tooltip-label slot="label" :title="$t('label.name')" :tooltip="apiParams.addAccountToProject.roletype.description"/>
             <a-select
-              showSearch
               v-decorator="['roletype']"
-              :placeholder="$t('label.roletype')">
+              :placeholder="$t('label.roletype')"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option value="Admin">Admin</a-select-option>
               <a-select-option value="Regular">Regular</a-select-option>
             </a-select>
@@ -95,11 +102,14 @@
           <a-form-item>
             <tooltip-label slot="label" :title="$t('label.project.role')" :tooltip="apiParams.addUserToProject.roletype.description"/>
             <a-select
-              showSearch
               v-decorator="['projectroleid']"
               :loading="loading"
               :placeholder="$t('label.project.role')"
-            >
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option v-for="role in projectRoles" :key="role.id">
                 {{ role.name }}
               </a-select-option>
@@ -108,9 +118,13 @@
           <a-form-item>
             <tooltip-label slot="label" :title="$t('label.roletype')" :tooltip="apiParams.addUserToProject.roletype.description"/>
             <a-select
-              showSearch
               v-decorator="['roletype']"
-              :placeholder="$t('label.roletype')">
+              :placeholder="$t('label.roletype')"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option value="Admin">Admin</a-select-option>
               <a-select-option value="Regular">Regular</a-select-option>
             </a-select>
diff --git a/ui/src/views/storage/AttachVolume.vue b/ui/src/views/storage/AttachVolume.vue
index 4afd460bbd6f..ce3af4bce028 100644
--- a/ui/src/views/storage/AttachVolume.vue
+++ b/ui/src/views/storage/AttachVolume.vue
@@ -29,7 +29,12 @@
           v-decorator="['virtualmachineid', {
             rules: [{ required: true, message: $t('message.error.select') }]
           }]"
-          :placeholder="apiParams.virtualmachineid.description">
+          :placeholder="apiParams.virtualmachineid.description"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option v-for="vm in virtualmachines" :key="vm.id">
             {{ vm.name || vm.displayname }}
           </a-select-option>
diff --git a/ui/src/views/storage/CreateSnapshotFromVMSnapshot.vue b/ui/src/views/storage/CreateSnapshotFromVMSnapshot.vue
index e66853fa78bc..d9ed976f4f2b 100644
--- a/ui/src/views/storage/CreateSnapshotFromVMSnapshot.vue
+++ b/ui/src/views/storage/CreateSnapshotFromVMSnapshot.vue
@@ -38,7 +38,11 @@
             rules: [{ required: true, message: $t('message.error.select') }]}]"
           :loading="loading"
           @change="id => (volumes.filter(x => x.id === id))"
-        >
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option
             v-for="(volume, index) in volumes"
             :value="volume.id"
diff --git a/ui/src/views/storage/CreateVolume.vue b/ui/src/views/storage/CreateVolume.vue
index 9277aac36aa5..6408aa66d022 100644
--- a/ui/src/views/storage/CreateVolume.vue
+++ b/ui/src/views/storage/CreateVolume.vue
@@ -39,7 +39,12 @@
             initialValue: selectedZoneId,
             rules: [{ required: true, message: $t('message.error.zone') }] }]"
           :loading="loading"
-          @change="zone => fetchDiskOfferings(zone)">
+          @change="zone => fetchDiskOfferings(zone)"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option
             v-for="(zone, index) in zones"
             :value="zone.id"
@@ -56,7 +61,11 @@
             rules: [{ required: true, message: $t('message.error.select') }]}]"
           :loading="loading"
           @change="id => onChangeDiskOffering(id)"
-        >
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option
             v-for="(offering, index) in offerings"
             :value="offering.id"
diff --git a/ui/src/views/storage/FormSchedule.vue b/ui/src/views/storage/FormSchedule.vue
index 146afc1b650f..b5726bacc1f0 100644
--- a/ui/src/views/storage/FormSchedule.vue
+++ b/ui/src/views/storage/FormSchedule.vue
@@ -90,7 +90,12 @@
                       required: true,
                       message: `${this.$t('message.error.select')}`
                     }]
-                  }]" >
+                  }]"
+                  showSearch
+                  optionFilterProp="children"
+                  :filterOption="(input, option) => {
+                    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  }" >
                   <a-select-option v-for="(opt, optIndex) in dayOfWeek" :key="optIndex">
                     {{ opt.name || opt.description }}
                   </a-select-option>
@@ -105,7 +110,12 @@
                       required: true,
                       message: `${this.$t('message.error.select')}`
                     }]
-                  }]">
+                  }]"
+                  showSearch
+                  optionFilterProp="children"
+                  :filterOption="(input, option) => {
+                    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  }" >
                   <a-select-option v-for="opt in dayOfMonth" :key="opt.name">
                     {{ opt.name }}
                   </a-select-option>
@@ -130,14 +140,18 @@
             <a-col :md="24" :lg="24">
               <a-form-item :label="$t('label.timezone')">
                 <a-select
-                  showSearch
                   v-decorator="['timezone', {
                     rules: [{
                       required: true,
                       message: `${this.$t('message.error.select')}`
                     }]
                   }]"
-                  :loading="fetching">
+                  :loading="fetching"
+                  showSearch
+                  optionFilterProp="children"
+                  :filterOption="(input, option) => {
+                    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                  }" >
                   <a-select-option v-for="opt in timeZoneMap" :key="opt.id">
                     {{ opt.name || opt.description }}
                   </a-select-option>
diff --git a/ui/src/views/storage/MigrateVolume.vue b/ui/src/views/storage/MigrateVolume.vue
index df8b0bf1bf24..b584aca6fc6a 100644
--- a/ui/src/views/storage/MigrateVolume.vue
+++ b/ui/src/views/storage/MigrateVolume.vue
@@ -26,7 +26,12 @@
         <a-select
           v-model="selectedStoragePool"
           style="width: 100%;"
-          :autoFocus="storagePools.length > 0">
+          :autoFocus="storagePools.length > 0"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option v-for="(storagePool, index) in storagePools" :value="storagePool.id" :key="index">
             {{ storagePool.name }} <span v-if="resource.virtualmachineid">{{ storagePool.suitableformigration ? `(${$t('label.suitable')})` : `(${$t('label.not.suitable')})` }}</span>
           </a-select-option>
@@ -39,7 +44,14 @@
 
           <template v-if="replaceDiskOffering">
             <p class="modal-form__label">{{ $t('label.newdiskoffering') }}</p>
-            <a-select v-model="selectedDiskOffering" style="width: 100%;">
+            <a-select
+              v-model="selectedDiskOffering"
+              style="width: 100%;"
+              showSearch
+              optionFilterProp="children"
+              :filterOption="(input, option) => {
+                return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+              }" >
               <a-select-option v-for="(diskOffering, index) in diskOfferings" :value="diskOffering.id" :key="index">
                 {{ diskOffering.displaytext }}
               </a-select-option>
diff --git a/ui/src/views/storage/ResizeVolume.vue b/ui/src/views/storage/ResizeVolume.vue
index 7f5ce528c9c6..9b0771a3295f 100644
--- a/ui/src/views/storage/ResizeVolume.vue
+++ b/ui/src/views/storage/ResizeVolume.vue
@@ -27,7 +27,11 @@
           :placeholder="$t('label.diskoffering')"
           @change="id => (customDiskOffering = offerings.filter(x => x.id === id)[0].iscustomized || false)"
           :autoFocus="resource.type !== 'ROOT'"
-        >
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option
             v-for="(offering, index) in offerings"
             :value="offering.id"
diff --git a/ui/src/views/storage/RestoreAttachBackupVolume.vue b/ui/src/views/storage/RestoreAttachBackupVolume.vue
index c666d8c6e412..4b92f58ea04c 100644
--- a/ui/src/views/storage/RestoreAttachBackupVolume.vue
+++ b/ui/src/views/storage/RestoreAttachBackupVolume.vue
@@ -25,7 +25,12 @@
             rules: [{ required: true, message: `${this.$t('message.error.select')}` }]
           }]"
           :loading="volumeOptions.loading"
-          autoFocus>
+          autoFocus
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option
             v-for="(opt) in volumeOptions.opts"
             :key="opt.id">
@@ -35,12 +40,16 @@
       </a-form-item>
       <a-form-item :label="$t('label.vm')">
         <a-select
-          showSearch
           allowClear
           v-decorator="['virtualmachineid', {
             rules: [{ required: true, message: `${this.$t('message.error.select')}` }]
           }]"
-          :loading="virtualMachineOptions.loading">
+          :loading="virtualMachineOptions.loading"
+          showSearch
+          optionFilterProp="children"
+          :filterOption="(input, option) => {
+            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }" >
           <a-select-option
             v-for="(opt) in virtualMachineOptions.opts"
             :key="opt.name">
diff --git a/ui/src/views/storage/UploadLocalVolume.vue b/ui/src/views/storage/UploadLocalVolume.vue
index 453ab518a88a..06d69b7d2206 100644
--- a/ui/src/views/storage/UploadLocalVolume.vue
+++ b/ui/src/views/storage/UploadLocalVolume.vue
@@ -64,7 +64,12 @@
                   message: `${this.$t('message.error.select')}`
                 }
               ]
-            }]">
+            }]"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option :value="zone.id" v-for="zone in zones" :key="zone.id">
               {{ zone.name || zone.description }}
             </a-select-option>
@@ -81,7 +86,12 @@
                   message: `${this.$t('message.error.select')}`
                 }
               ]
-            }]">
+            }]"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="format in formats" :key="format">
               {{ format }}
             </a-select-option>

From 3858e15e407fe8d89e1a910a807446e7e3ab3912 Mon Sep 17 00:00:00 2001
From: davidjumani <dj.davidjumani1994@gmail.com>
Date: Mon, 23 Aug 2021 15:11:38 +0530
Subject: [PATCH 3/4] Adding support for default.ui.page.size

---
 .../META-INF/db/schema-41510to41600.sql       | 20 ++++++++++---------
 ui/src/api/index.js                           |  3 ++-
 ui/src/store/getters.js                       |  4 +++-
 ui/src/store/modules/user.js                  | 19 +++++++++++++++++-
 ui/src/views/AutogenView.vue                  | 17 ++++++++++------
 5 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/engine/schema/src/main/resources/META-INF/db/schema-41510to41600.sql b/engine/schema/src/main/resources/META-INF/db/schema-41510to41600.sql
index cc43cc61a030..d5c40861f928 100644
--- a/engine/schema/src/main/resources/META-INF/db/schema-41510to41600.sql
+++ b/engine/schema/src/main/resources/META-INF/db/schema-41510to41600.sql
@@ -708,26 +708,26 @@ CREATE PROCEDURE `cloud`.`ADD_GUEST_OS_AND_HYPERVISOR_MAPPING` (
     IN guest_os_hypervisor_hypervisor_version VARCHAR(32),
     IN guest_os_hypervisor_guest_os_name VARCHAR(255)
 )
-BEGIN	
-	INSERT  INTO cloud.guest_os (uuid, category_id, display_name, created) 
+BEGIN
+	INSERT  INTO cloud.guest_os (uuid, category_id, display_name, created)
 	SELECT 	UUID(), guest_os_category_id, guest_os_display_name, now()
 	FROM    DUAL
-	WHERE 	not exists( SELECT  1 
+	WHERE 	not exists( SELECT  1
 	                    FROM    cloud.guest_os
 	                    WHERE   cloud.guest_os.category_id = guest_os_category_id
-	                    AND     cloud.guest_os.display_name = guest_os_display_name)	
-						
-;	INSERT  INTO cloud.guest_os_hypervisor (uuid, hypervisor_type, hypervisor_version, guest_os_name, guest_os_id, created) 
+	                    AND     cloud.guest_os.display_name = guest_os_display_name)
+
+;	INSERT  INTO cloud.guest_os_hypervisor (uuid, hypervisor_type, hypervisor_version, guest_os_name, guest_os_id, created)
 	SELECT 	UUID(), guest_os_hypervisor_hypervisor_type, guest_os_hypervisor_hypervisor_version, guest_os_hypervisor_guest_os_name, guest_os.id, now()
 	FROM 	cloud.guest_os
 	WHERE 	guest_os.category_id = guest_os_category_id
 	AND 	guest_os.display_name = guest_os_display_name
-	AND	NOT EXISTS (SELECT  1 
+	AND	NOT EXISTS (SELECT  1
 	                    FROM    cloud.guest_os_hypervisor as hypervisor
-	                    WHERE   hypervisor_type = guest_os_hypervisor_hypervisor_type			
+	                    WHERE   hypervisor_type = guest_os_hypervisor_hypervisor_type
 	                    AND     hypervisor_version = guest_os_hypervisor_hypervisor_version
 	                    AND     hypervisor.guest_os_id = guest_os.id
-	                    AND     hypervisor.guest_os_name = guest_os_hypervisor_guest_os_name)    
+	                    AND     hypervisor.guest_os_name = guest_os_hypervisor_guest_os_name)
 ;END;
 
 -- PR#4699 Call procedure `ADD_GUEST_OS_AND_HYPERVISOR_MAPPING` to add new data to guest_os and guest_os_hypervisor.
@@ -757,3 +757,5 @@ UPDATE cloud.user_vm_deploy_as_is_details SET value='' WHERE value IS NULL;
 ALTER TABLE cloud.user_vm_deploy_as_is_details MODIFY value text NOT NULL;
 UPDATE cloud.user_vm_details SET value='' WHERE value IS NULL;
 ALTER TABLE cloud.user_vm_details MODIFY value varchar(5120) NOT NULL;
+
+UPDATE `cloud`.`configuration` SET `value` = 20, `default_value` = 20 WHERE `name` = 'default.ui.page.size';
diff --git a/ui/src/api/index.js b/ui/src/api/index.js
index e371bda36391..a957585ea38b 100644
--- a/ui/src/api/index.js
+++ b/ui/src/api/index.js
@@ -16,6 +16,7 @@
 // under the License.
 
 import { axios } from '@/utils/request'
+import store from '@/store'
 
 export async function api (command, args = {}, method = 'GET', data = {}) {
   let params = {}
@@ -42,7 +43,7 @@ export async function api (command, args = {}, method = 'GET', data = {}) {
     })
   }
 
-  const pagesize = 10
+  const pagesize = store.getters.defaultPageSize
   let page = 1
   let items = []
   let done = false
diff --git a/ui/src/store/getters.js b/ui/src/store/getters.js
index eda3d9a6b135..2d47dd10b69e 100644
--- a/ui/src/store/getters.js
+++ b/ui/src/store/getters.js
@@ -39,7 +39,9 @@ const getters = {
   server: state => state.app.server,
   domainStore: state => state.user.domainStore,
   darkMode: state => state.user.darkMode,
-  themeSetting: state => state.user.themeSetting
+  themeSetting: state => state.user.themeSetting,
+  defaultPageSize: state => state.user.defaultPageSize,
+  listviewPageSize: state => state.user.listviewPageSize
 }
 
 export default getters
diff --git a/ui/src/store/modules/user.js b/ui/src/store/modules/user.js
index 29c3003e3580..267a115a388f 100644
--- a/ui/src/store/modules/user.js
+++ b/ui/src/store/modules/user.js
@@ -55,7 +55,9 @@ const user = {
     usebrowsertimezone: false,
     domainStore: {},
     darkMode: false,
-    themeSetting: {}
+    themeSetting: {},
+    defaultPageSize: 500,
+    listviewPageSize: 20
   },
 
   mutations: {
@@ -118,6 +120,12 @@ const user = {
     SET_THEME_SETTING (state, setting) {
       state.themeSetting = setting
       Vue.ls.set(THEME_SETTING, setting)
+    },
+    SET_DEFAULT_PAGE_SIZE: (state, defaultPageSize) => {
+      state.defaultPageSize = defaultPageSize
+    },
+    SET_DEFAULT_LISTVIEW_PAGE_SIZE: (state, listviewPageSize) => {
+      state.listviewPageSize = listviewPageSize
     }
   },
 
@@ -254,6 +262,15 @@ const user = {
           reject(error)
         })
 
+        api('listConfigurations', { keyword: 'page.size' }).then(response => {
+          const defaultPageSize = parseInt(response.listconfigurationsresponse.configuration.filter(x => x.name === 'default.page.size')[0].value)
+          const listviewPageSize = parseInt(response.listconfigurationsresponse.configuration.filter(x => x.name === 'default.ui.page.size')[0].value)
+          commit('SET_DEFAULT_PAGE_SIZE', defaultPageSize)
+          commit('SET_DEFAULT_LISTVIEW_PAGE_SIZE', listviewPageSize)
+        }).catch(error => {
+          reject(error)
+        })
+
         api('listLdapConfigurations').then(response => {
           const ldapEnable = (response.ldapconfigurationresponse.count > 0)
           commit('SET_LDAP', ldapEnable)
diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
index c4bf3dc55979..65da9fe3c13a 100644
--- a/ui/src/views/AutogenView.vue
+++ b/ui/src/views/AutogenView.vue
@@ -373,7 +373,7 @@
         :pageSize="pageSize"
         :total="itemCount"
         :showTotal="total => `${$t('label.showing')} ${Math.min(total, 1+((page-1)*pageSize))}-${Math.min(page*pageSize, total)} ${$t('label.of')} ${total} ${$t('label.items')}`"
-        :pageSizeOptions="device === 'desktop' ? ['20', '50', '100', '200'] : ['10', '20', '50', '100', '200']"
+        :pageSizeOptions="pageSizeOptions"
         @change="changePage"
         @showSizeChange="changePageSize"
         showSizeChanger
@@ -450,7 +450,7 @@ export default {
       modalInfo: {},
       itemCount: 0,
       page: 1,
-      pageSize: 10,
+      pageSize: this.$store.getters.listviewPageSize,
       resource: {},
       selectedRowKeys: [],
       currentAction: {},
@@ -557,9 +557,6 @@ export default {
       }
     })
 
-    if (this.device === 'desktop') {
-      this.pageSize = 20
-    }
     this.currentPath = this.$route.fullPath
     this.fetchData()
     if ('projectid' in this.$route.query) {
@@ -582,7 +579,6 @@ export default {
           this.pageSize = Number(to.query.pagesize)
         } else {
           this.page = 1
-          this.pageSize = (this.device === 'desktop' ? 20 : 10)
         }
         this.itemCount = 0
         this.fetchData()
@@ -603,6 +599,15 @@ export default {
   computed: {
     hasSelected () {
       return this.selectedRowKeys.length > 0
+    },
+    pageSizeOptions () {
+      var sizes = [20, 50, 100, 200, this.$store.getters.listviewPageSize]
+      if (this.device !== 'desktop') {
+        sizes.unshift(10)
+      }
+      return [...new Set(sizes)].sort(function (a, b) {
+        return a - b
+      }).map(String)
     }
   },
   methods: {

From ffeb75138ec348a6b11a0904f80a28a5a849e259 Mon Sep 17 00:00:00 2001
From: davidjumani <dj.davidjumani1994@gmail.com>
Date: Thu, 26 Aug 2021 10:42:23 +0530
Subject: [PATCH 4/4] Removing logs

---
 ui/src/api/index.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/ui/src/api/index.js b/ui/src/api/index.js
index a957585ea38b..2875308fdf2b 100644
--- a/ui/src/api/index.js
+++ b/ui/src/api/index.js
@@ -32,7 +32,7 @@ export async function api (command, args = {}, method = 'GET', data = {}) {
 
   const exemptedAPIs = ['listLdapConfigurations', 'listCapabilities', 'listIdps', 'listApis', 'listInfrastructure', 'listAndSwitchSamlAccount']
 
-  if ('page' in args || exemptedAPIs.includes(command) || !command.startsWith('list')) {
+  if ('page' in args || 'id' in args || exemptedAPIs.includes(command) || !command.startsWith('list')) {
     return axios({
       params: {
         ...args
@@ -77,13 +77,10 @@ export async function api (command, args = {}, method = 'GET', data = {}) {
       }
       if (json[responseName][objectName]) {
         items = items.concat(json[responseName][objectName])
-        console.log(command, page, responseName, objectName, items.length, json[responseName].count, 'WIP')
       }
       if (!json[responseName].count || json[responseName].count === items.length || !json[responseName][objectName]) {
-        console.log(command, page, responseName, objectName, items.length, json[responseName].count, 'DONE')
         done = true
         json[responseName][objectName] = items
-        console.log(json)
         response = new Promise((resolve) => {
           resolve(json)
         })