searchBox.ftl
1 <#macro searchBox id>
2 <div id="${id}" class="card rounded-pill px-4 py-0 pe-2 bg-form mb-0">
3 <div class="row g-2 align-items-center">
4 <#nested>
5 <div class="col-md-auto d-flex align-items-center justify-content-center position-relative align-self-stretch py-2">
6 <button id="searchButton" type="submit" class="btn btn-primary rounded-pill h-100 align-center d-flex align-items-center px-3">
7 <i class="ti ti-search"></i>
8 </button>
9 </div>
10 </div>
11 </div>
12 <script type="module">
13 document.getElementById('searchButton').addEventListener('click', function() {
14 var searchButton = this;
15 var icon = searchButton.querySelector('i');
16 icon.classList.remove('ti-search');
17 icon.classList.add('ti-loader-2','spinSearchBox');
18 searchButton.classList.add('btn-dark','shadow-lg')
19 });
20 var inputs = document.querySelectorAll('#${id} input');
21 for(var i = 0; i < inputs.length; i++) {
22 inputs[i].addEventListener('keydown', function(e) {
23 if(e.key === 'Enter' || e.keyCode == 13) {
24 e.preventDefault();
25 document.getElementById('searchButton').click();
26 }
27 });
28 }
29 </script>
30 <style>
31 @keyframes spinSearchBox {
32 0% { transform: rotate(0deg); }
33 100% { transform: rotate(360deg); }
34 }
35 .spinSearchBox {
36 animation: spinSearchBox 0.3s linear infinite;
37 }
38 </style>
39 </#macro>