ui: Allow searching in dropdowns (#5395)

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" >
 

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>
@@ -30,7 +38,14 @@
     </div>
     <div class="form__item" v-if="accountsList">
       <p class="form__label">{{ $t('label.account') }}</p>
-      <a-select style="width: 100%" @change="handleChangeAccount">
+      <a-select
+        style="width: 100%"
+        @change="handleChangeAccount"
+        showSearch
+        optionFilterProp="children"
+        :filterOption="(input, option) => {
+          return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        }" >
         <a-select-option v-for="(account, index) in accountsList" :value="account.name" :key="index">
           {{ account.name }}
         </a-select-option>

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>

ui/src/components/view/SearchView.vue

@@ -58,6 +58,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"

ui/src/views/AutogenView.vue

@@ -50,7 +50,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') }}
@@ -215,6 +220,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">
@@ -274,6 +284,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 }}

ui/src/views/auth/Login.vue

@@ -46,7 +46,12 @@
                 initialValue: (server.apiHost || '') + server.apiBase
               }
             ]"
-            @change="onChangeServer">
+            @change="onChangeServer"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="item in $config.servers" :key="(item.apiHost || '') + item.apiBase">
               <a-icon slot="prefix" type="database" :style="{ color: 'rgba(0,0,0,.25)' }"></a-icon>
               {{ item.name }}
@@ -113,7 +118,12 @@
                 initialValue: (server.apiHost || '') + server.apiBase
               }
             ]"
-            @change="onChangeServer">
+            @change="onChangeServer"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }" >
             <a-select-option v-for="item in $config.servers" :key="(item.apiHost || '') + item.apiBase">
               <a-icon slot="prefix" type="database" :style="{ color: 'rgba(0,0,0,.25)' }"></a-icon>
               {{ item.name }}
@@ -121,7 +131,13 @@
           </a-select>
         </a-form-item>
         <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>

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>

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>

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">

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>
@@ -481,7 +484,10 @@
                       <a-form-item :label="$t('label.boottype')">
                         <a-select
                           v-decorator="['boottype', { initialValue: options.bootTypes && options.bootTypes.length > 0 ? options.bootTypes[0].id : undefined }]"
-                          @change="onBootTypeChange">
+                          @change="fetchBootModes"
+                          showSearch
+                          optionFilterProp="children"
+                          :filterOption="filterOption" >
                           <a-select-option v-for="bootType in options.bootTypes" :key="bootType.id">
                             {{ bootType.description }}
                           </a-select-option>
@@ -489,7 +495,10 @@
                       </a-form-item>
                       <a-form-item :label="$t('label.bootmode')">
                         <a-select
-                          v-decorator="['bootmode', { initialValue: options.bootModes && options.bootModes.length > 0 ? options.bootModes[0].id : undefined }]">
+                          v-decorator="['bootmode', { initialValue: options.bootModes && options.bootModes.length > 0 ? options.bootModes[0].id : undefined }]"
+                          showSearch
+                          optionFilterProp="children"
+                          :filterOption="filterOption" >
                           <a-select-option v-for="bootMode in options.bootModes" :key="bootMode.id">
                             {{ bootMode.description }}
                           </a-select-option>
@@ -553,6 +562,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')">

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>

ui/src/views/compute/InstanceTab.vue

@@ -161,7 +161,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"
@@ -195,11 +200,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>
@@ -234,11 +243,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>

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>

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,

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>

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>

ui/src/views/dashboard/CapacityDashboard.vue

@@ -21,12 +21,15 @@
       <div class="capacity-dashboard-wrapper">
         <div class="capacity-dashboard-select">
           <a-select
-            showSearch
-            optionFilterProp="children"
             :defaultValue="zoneSelected.name"
             :placeholder="$t('label.select.a.zone')"
             :value="zoneSelected.name"
-            @change="changeZone">
+            @change="changeZone"
+            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" :key="index">
               {{ zone.name }}
             </a-select-option>

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>

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>

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>

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>

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"

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>

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>

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>

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>

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,6 +267,11 @@
                     }
                   ]
                 }]"
+                showSearch
+                optionFilterProp="children"
+                :filterOption="(input, option) => {
+                  return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                }"
                 :placeholder="$t('label.nicadaptertype')">
                 <a-select-option v-for="opt in nicAdapterType.opts" :key="opt.id">
                   {{ opt.name || opt.description }}
@@ -270,6 +290,11 @@
                 }
               ]
             }]"
+            showSearch
+            optionFilterProp="children"
+            :filterOption="(input, option) => {
+              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            }"
             :placeholder="$t('label.keyboard')">
             <a-select-option v-for="opt in keyboardType.opts" :key="opt.id">
               {{ opt.name || opt.description }}

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>

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>

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"

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"

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>

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>

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"

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"

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>

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 pods" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
           </a-select>
         </a-form-item>

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"

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>

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>

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>

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>

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>

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>

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"

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>

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>

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>

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>

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>

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] }}

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>

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"

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>

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>

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>

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>

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>
@@ -331,7 +364,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"
@@ -366,7 +404,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>

ui/src/views/network/PortForwarding.vue

@@ -60,7 +60,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>

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>

ui/src/views/network/VpcTiersTab.vue

@@ -185,7 +185,12 @@
             </span>
             <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>
@@ -242,7 +247,12 @@
             <a-select
               :placeholder="$t('label.create.tier.aclid.description')"
               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>
@@ -303,7 +313,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>

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>

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>

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>

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>

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>

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"

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"

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>

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>

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"

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">

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>