xxxxxxxxxx1
<section class="intro">2
<div class="bg-image h-100" style="3
background-image: url(https://mdbootstrap.com/img/Photos/new-templates/search-box/img7.jpg);4
">5
<div class="mask d-flex align-items-center h-100" style="background-color: rgba(0,0,0,.5);">6
<div class="container">7
<div class="row">8
<div class="col-md-12 col-lg-11 col-xl-9 mx-auto">9
<div class="card gradient-custom">10
<div class="card-body p-4">11
<h2 class="text-black font-weight-bold mt-3 mb-4 pb-2">Search Hotels</h2>12
<div class="row">13
<div class="col-12 d-flex justify-content-left">14
<div class="card text-white text-center me-3 mb-4" style="background-color: #002d72;">15
<div class="card-body">16
<i class="fas fa-bed fa-lg mb-3"></i>17
<p class="text-uppercase mb-0">hotel only</p>18
</div>19
</div>20
<div class="card text-black text-center me-3 mb-4">21
<div class="card-body">22
<div>23
<i class="fas fa-bed fa-lg me-2 mb-3"></i>24
<i class="fas fa-plane mb-3"></i>25
</div>26
<p class="text-uppercase mb-0">hotel + flight</p>27
</div>28
</div>29
<div class="card text-black text-center me-3 mb-4">30
<div class="card-body">31
<div>32
<i class="fas fa-bed fa-lg mb-3"></i>33
<i class="fas fa-plane mx-2 mb-3"></i>34
<i class="fas fa-car-alt mb-3"></i>35
</div>36
<p class="text-uppercase mb-0">hotel + flight + car</p>37
</div>38
</div>39
<div class="card text-black text-center mb-4">40
<div class="card-body">41
<div>42
<i class="fas fa-bed fa-lg me-2 mb-3"></i>43
<i class="fas fa-car-alt mb-3"></i>44
</div>45
<p class="text-uppercase mb-0">hotel + car</p>46
</div>47
</div>48
</div>49
</div>50
51
<div class="row">52
<div class="col-12 mb-4">53
<div class="card">54
<div class="card-body p-3 d-flex justify-content-left">55
<i class="fas fa-search fa-lg text-black d-flex align-self-center me-2"></i>56
<div id="basic" class="form-outline flex-fill">57
<input type="text" id="form1" class="form-control form-control-l"58
placeholder="Destination, hotel name" />59
<label class="text-uppercase form-label" for="form1">Going to</label>60
</div>61
</div>62
</div>63
</div>64
</div>65
<div class="row">66
<div class="col-4 mb-4">67
<div class="card">68
<div class="card-body p-3 d-flex justify-content-left">69
<i class="far fa-calendar fa-lg text-black d-flex align-self-center me-2"></i>70
<div class="form-outline datepicker flex-fill" data-mdb-toggle-button="false">71
<input type="text" class="form-control" id="exampleDatepicker1"72
data-mdb-toggle="datepicker" />73
<label for="exampleDatepicker1" class="text-uppercase form-label">Check-in</label>74
</div>75
</div>76
</div>77
</div>78
<div class="col-4 mb-4">79
<div class="card">80
<div class="card-body p-3 d-flex justify-content-left">81
<i class="fas fa-calendar fa-lg text-black d-flex align-self-center me-2"></i>82
<div class="form-outline datepicker flex-fill" data-mdb-toggle-button="false">83
<input type="text" class="form-control" id="exampleDatepicker2"84
data-mdb-toggle="datepicker" />85
<label for="exampleDatepicker2" class="text-uppercase form-label">Check-out</label>86
</div>87
</div>88
</div>89
</div>90
<div class="col-4 mb-4">91
<div class="card">92
<div class="card-body p-3 d-flex justify-content-left">93
<i class="fas fa-user-friends fa-lg text-black d-flex align-self-center me-2"></i>94
<div id="location" class="form-outline flex-fill">95
<input type="text" id="form2" class="form-control" />96
<label class="text-uppercase form-label" for="form2">Number of guests</label>97
</div>98
</div>99
</div>100
</div>101
</div>102
<div class="row">103
<div class="col-12">104
<div class="mb-4">105
<div class="form-check form-check-inline">106
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"107
checked />108
<label class="form-check-label text-white font-weight-bold" for="inlineCheckbox1">ADD A109
FLIGHT</label>110
</div>111
<div class="form-check form-check-inline">112
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2" />113
<label class="form-check-label text-white font-weight-bold" for="inlineCheckbox2">ADD A114
CAR</label>115
</div>116
</div>117
<button type="button" class="btn btn-warning btn-lg">Search</button>118
</div>119
</div>120
</div>121
</div>122
</div>123
</div>124
</div>125
</div>126
</div>127
</section>128
xxxxxxxxxx1
html,2
body,3
.intro {4
height: 100%;5
}6
7
.form-outline .form-control~.form-notch div {8
border-color: transparent;9
}10
11
.form-outline .form-control:focus~.form-notch .form-notch-leading {12
border-top: 0.125rem solid transparent;13
border-bottom: 0.125rem solid transparent;14
border-left: 0.125rem solid transparent;15
}16
17
.form-outline .form-control:focus~.form-notch .form-notch-middle {18
border-color: transparent;19
}20
21
.form-outline .form-control:focus~.form-notch .form-notch-trailing {22
border-top: 0.125rem solid transparent;23
border-bottom: 0.125rem solid transparent;24
border-right: 0.125rem solid transparent;25
}26
27
.form-outline .form-control:focus~.form-label {28
color: #000;29
}30
31
.autocomplete-input.focused~.form-notch .form-notch-leading {32
border-top: 2px solid transparent;33
border-bottom: 2px solid transparent;34
border-left: 2px solid transparent;35
transition: all 0.2s linear;36
}37
38
.autocomplete-input.focused~.form-notch .form-notch-middle {39
border-color: transparent;40
}41
42
.autocomplete-input.focused~.form-notch .form-notch-trailing {43
border-color: transparent;44
}45
46
.autocomplete-input.focused~.autocomplete-label {47
color: #000;48
}49
50
.gradient-custom {51
background: #4facfe;52
53
background: -webkit-linear-gradient(to bottom, rgba(79, 172, 254, 0.8), rgba(0, 242, 254, 0.8));54
55
background: linear-gradient(to bottom, rgba(79, 172, 254, 0.8), rgba(0, 242, 254, 0.8))56
}57
58
.form-control {59
border-color: transparent;60
}61
62
.form-control:focus {63
border-color: transparent;64
box-shadow: inset 0 0 0 1px transparent;65
}66
67
.form-check {68
line-height: 1.6;69
}70
71
.form-check-input[type=checkbox] {72
border-radius: .125rem;73
}xxxxxxxxxx1
const locationAutocomplete = document.querySelector('#location');2
const dataL = [3
'1 adult',4
'2 adults',5
'3 adults',6
'2 adults and 1 child',7
'2 adults and 2 children',8
];9
const dataFilterL = (value) => {10
return dataL.filter((item) => {11
return item.toLowerCase().startsWith(value.toLowerCase());12
});13
};14
15
new mdb.Autocomplete(locationAutocomplete, {16
filter: dataFilterL,17
}); Console errors: 0