Search box - Intro vertical image

xxxxxxxxxx
 
<template>
<section class="intro">
  <div class="bg-image-vertical vh-100" style="background-color: #EFD3E4;
          background-image: url(https://mdbootstrap.com/img/Photos/new-templates/search-box/img1.jpg);
        ">
    <div class="mask d-flex align-items-center h-100">
      <MDBContainer>
        <p class="display-4 font-weight-bold mb-5 text-dark">Discover the Amazing City</p>
        <MDBCard>
          <MDBCardBody>
            <MDBRow class="justify-content-center">
              <MDBCol md="6" class="mb-3 mb-md-0">
                <div id="basic" class="form-outline">
                  <MDBAutocomplete :filter="filterBasic" label="What are you looking for?" size="lg" />
                </div>
              </MDBCol>
              <MDBCol md="4" class="mb-3 mb-md-0">
                <div id="location" class="form-outline">
                  <MDBAutocomplete :filter="filterLocation" label="Location" size="lg" />
                </div>
              </MDBCol>
              <MDBCol md="2">
                <MDBBtn size="lg" color="secondary" class="btn-block" type="submit">Search</MDBBtn>
              </MDBCol>
            </MDBRow>
          </MDBCardBody>
        </MDBCard>
      </MDBContainer>
    </div>
  </div>
</section>
</template>

xxxxxxxxxx
 
<style>
#app {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}
.fw-900 {
  font-weight: 900;
}
​
.form-outline .form-control:focus~.form-label {
  background-color: white;
  z-index: 2;
  padding-left: 4px;
  padding-right: 4px;
}
​
html,
body,
.intro {
  height: 100%;
}
​
.bg-image-vertical {
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
}
​
.form-outline .form-control:focus ~ .form-notch .form-notch-leading {
  border-top: 0.125rem solid #b23cfd;
  border-bottom: 0.125rem solid #b23cfd;
  border-left: 0.125rem solid #b23cfd;
}
.form-outline .form-control:focus ~ .form-notch .form-notch-middle {
  border-color: #b23cfd;
}
.form-outline .form-control:focus ~ .form-notch .form-notch-trailing {
  border-top: 0.125rem solid #b23cfd;
  border-bottom: 0.125rem solid #b23cfd;
  border-right: 0.125rem solid #b23cfd;
}
.form-outline .form-control:focus ~ .form-label {
  color: #b23cfd;
}
.autocomplete-input.focused ~ .form-notch .form-notch-leading {
  border-top: 2px solid #b23cfd;
  border-bottom: 2px solid #b23cfd;
  border-left: 2px solid #b23cfd;
  transition: all 0.2s linear;
}
.autocomplete-input.focused ~ .form-notch .form-notch-middle {
  border-color: #b23cfd;
}
.autocomplete-input.focused ~ .form-notch .form-notch-trailing {
  border-color: #b23cfd;
}
.autocomplete-input.focused ~ .autocomplete-label {
  color: #b23cfd;
}
</style>

xxxxxxxxxx
 
  <script>
      import {
          MDBContainer,
          MDBCard,
          MDBCardBody,
          MDBRow,
          MDBCol,
          MDBAutocomplete,
          MDBBtn
      } from "mdb-vue-ui-kit";
​
  import {
      ref
  } from "vue"
​
  export default {
      name: "App",
      components: {
          MDBContainer,
          MDBCard,
          MDBCardBody,
          MDBRow,
          MDBCol,
          MDBAutocomplete,
          MDBBtn
      },
    setup() {
      const basicAutocomplete = ref(['Museum', 'Party', 'Restaurant', 'Concert', 'Architecture'])
      const locationAutocomplete = ref(['Madrid', 'Rome', 'Lisbon', 'Paris', 'London'])
​
      const filterBasic = value => {
        return basicAutocomplete.value.filter(item => {
          return item.toLowerCase().startsWith(value.toLowerCase());
        });
      };    
      
      const filterLocation = value => {
        return locationAutocomplete.value.filter(item => {
          return item.toLowerCase().startsWith(value.toLowerCase());
        });
      };      
      
      return { filterBasic, filterLocation }
      }
    
  }; 
</script>

Console errors: 0