frames/components/Ui/Search/Address.vue

<template>
  <v-text-field
    type="text"
    name="search-city"
    class="search-bar"
    outlined
    :label="$t('where') + ' ?'"
    autocomplete="off"
  >
    <button
      class="search-bar-btn"
      name="search-localize"
    >
      <i class="fas fa-crosshairs" />
    </button>
    <div class="city-search-dropdown" style="display: none;">
      <div class="city-search-loading">
        <nuxt-img
          src="EXT:ot_templating/Resources/Public/media/gear.gif"
          :alt="$t('please_wait')"
        />
      </div>
      <div class="city-search-no-result">
        {{ $t('no_result') }}
      </div>
      <div class="city-search-results" />
    </div>
    <input type="hidden" name="lat" value="{ot:request.getArgument(argument: 'lat')}">
    <input type="hidden" name="long" value="{ot:request.getArgument(argument: 'long')}">
  </v-text-field>
</template>

<style>
.v-input__control {
  height: 56px;
}
</style>