<section class="intro">

  <div class="bg-image h-100" style="

          background-image: url(https://mdbootstrap.com/img/Photos/new-templates/search-box/img2.jpg);

        ">

    <div class="mask d-flex align-items-center h-100" style="background-color: rgba(61, 162, 195, 0.1);">

      <div class="container">

        <div class="card mask-custom p-4">

          <div class="card-body">

            <p class="h1 font-weight-bold mb-4 text-white">Discover the Amazing City</p>

            <div class="row justify-content-center">

              <div class="col-md-6 mb-3 mb-md-0">

                <div id="basic" class="form-outline form-white">

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

                  <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-info btn-block btn-lg" type="submit" value="Search" />

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</section>

html,

body,

.intro {

  height: 100%;

}

​

.mask-custom {

  background: rgba(24, 24, 16, .2);

  border-radius: 2em;

  backdrop-filter: blur(15px);

  border: 2px solid rgba(255, 255, 255, 0.05);

  background-clip: padding-box;

  box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03);

}

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

});