Search box - intro vertical image

xxxxxxxxxx
 
<section class="intro">
  <div class="bg-image-vertical h-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">
      <div class="container">
        <p class="display-4 font-weight-bold mb-5 text-dark">Discover the Amazing City</p>
        <div class="card">
          <div class="card-body">
            <div class="row justify-content-center">
              <div class="col-md-6 mb-3 mb-md-0">
                <div id="basic" class="form-outline">
                  <input type="text" id="form1" class="form-control form-control-lg" />
                  <label class="form-label" for="form1">What are you looking for?</label>
                </div>
              </div>
              <div class="col-md-4 mb-3 mb-md-0">
                <div id="location" class="form-outline">
                  <input type="text" id="form2" class="form-control form-control-lg" />
                  <label class="form-label" for="form2">Location</label>
                </div>
              </div>
              <div class="col-md-2">
                <input class="btn btn-secondary btn-block btn-lg" type="submit" value="Search" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

xxxxxxxxxx
 
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;
}

xxxxxxxxxx
 
const basicAutocomplete = document.querySelector('#basic');
const data = ['Museum', 'Party', 'Restaurant', 'Concert', 'Architecture'];
const dataFilter = (value) => {
  return data.filter((item) => {
    return item.toLowerCase().startsWith(value.toLowerCase());
  });
};
​
new mdb.Autocomplete(basicAutocomplete, {
  filter: dataFilter
});
​
const locationAutocomplete = document.querySelector('#location');
const dataL = ['Madrid', 'Rome', 'Lisbon', 'Paris', 'London'];
const dataFilterL = (value) => {
  return dataL.filter((item) => {
    return item.toLowerCase().startsWith(value.toLowerCase());
  });
};
​
new mdb.Autocomplete(locationAutocomplete, {
  filter: dataFilterL
});

Console errors: 0