Hi Everyone,
I am trying to create a search component that will search records in a custom list. So I’ve created a custom list connected to the table, set the record limit to 20000, and added {{tb_search_input}} as described here - Custom Component | Tadabase
I have succeeded in making it work but the issue is what the records are showing even if the input is empty. If initially hide it in CSS with ‘display:none’, it will be hidden after clicking on a search button as well. I guess the whole component gets rerendered after clicking on ‘search’ or ‘clear’
Here is the code:
HTML:
<div id="search-component">
<button id="search-expander-button" class="btn-expand">חיפוס</button>
<div id="search-wrapper" class="search-menu hidden collapsed">
<div id="search-element">
{{tb_search_input}}
{{tb_search_submit}}
{{tb_search_clear}}
</div>
<ul class="search-results">
{{#each records}}
<li>
<a href="dh-1/details/{{field_522}}"><span>{{field_281}} | {{field_141}} | {{field_154}}</span></a>
</li>
{{/each}}
</ul>
</div>
</div>
CSS:
#search-wrapper {
background-color: #fff;
border-radius: 10px;
transition: width 2s, height 2s, background-color 2s, transform 2s;
z-index: 5;
position: absolute;
}
.btn-expand {
display: block;
width: 100%;
border-radius: 10px;
background-color: #fff;
border: none;
padding: 8px 15px;
margin: 10px auto;
}
.btn-expand:hover {
box-shadow: inset -1px -1px 7px #bbb7b7;
}
.btn-expand:active {
box-shadow: inset 1px 1px 3px 2px #bbb7b7;
}
.search-results {
list-style: none;
/* width: 18vw; */
/* max-height: 300px; */
overflow: scroll;
/* margin: 3px; */
/* margin-top: 0; */
padding: 11px;
text-align: left;
}
.search-results li a {
color: black;
}
#search-element {
padding: 5px 10px;
margin: auto auto 0;
}
.collapsed {
width: 0;
height: 0;
animation: unwrap 1s;
}
.collapsible {
width: 280px;
height: 380px;
overflow: hidden;
}
@keyframes unwrap {
from {
width: 280px;
height: 0;
}
}
JS:
let searchExpanderButton = document.querySelector('#search-expander-button');
let searchWrapper = document.querySelector('#search-wrapper');
searchExpanderButton.addEventListener('click', (e) => {
e.stopPropagation();
searchWrapper.classList.toggle("hidden");
searchWrapper.classList.toggle("collapsible");
});