<section class="intro">

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

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

        ">

    <div class="mask d-flex align-items-center h-100" style="background-color: rgba(194, 185, 179, 0.2);">

      <div class="container">

        <p class="h1 mb-4 mb-md-5 text-dark text-uppercase text-center">Search hotel</p>

        <div class="card" style="background-color: rgba(0,0,0,.7);">

          <div class="card-body p-4">

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

              <div class="col-lg-12 col-xl-10 d-lg-flex flex-row mb-lg-4 mb-xl-0">

​

                <div id="basic" class="form-outline form-white flex-fill me-lg-2 mb-3 mb-lg-0">

                  <input type="text" id="form1" class="form-control" />

                  <label class="form-label" for="form1">What are you looking for?</label>

                </div>

​

                <div class="form-outline datepicker form-white flex-fill mx-lg-2 mb-3 mb-lg-0" data-mdb-toggle-button="false">

                  <input type="text" class="form-control" id="exampleDatepicker1" data-mdb-toggle="datepicker" />

                  <label for="exampleDatepicker1" class="form-label">Arrival date</label>

                </div>

​

                <div class="form-outline datepicker form-white flex-fill mx-lg-2 mb-3 mb-lg-0" data-mdb-toggle-button="false">

                  <input type="text" class="form-control" id="exampleDatepicker2" data-mdb-toggle="datepicker" />

                  <label for="exampleDatepicker2" class="form-label">Departure date</label>

                </div>

​

                <div id="location" class="form-outline form-white flex-fill ms-lg-2 mb-4 mb-lg-0">

                  <input type="text" id="form2" class="form-control" />

                  <label class="form-label" for="form2">Number of guests</label>

                </div>

​

              </div>

              <div class="col-lg-12 col-xl-2">

                <input class="btn btn-primary btn-rounded btn-block" type="submit" value="Search" />

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</section>

html,

body,

.intro {

  height: 100%;

}

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 = ['1 adult', '2 adults', '3 adults', '2 adults and 1 child', '2 adults and 2 children'];

const dataFilterL = (value) => {

  return dataL.filter((item) => {

    return item.toLowerCase().startsWith(value.toLowerCase());

  });

};

​

new mdb.Autocomplete(locationAutocomplete, {

  filter: dataFilterL

});