.search-wrapper {
display: flex;
align-items: center;
gap: 10px;
}
#searchBox {
width: 100%;
max-width: 300px;
padding: 10px 14px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 6px;
outline: none;
transition: all 0.3s ease;
background-color: #fafafa;
color: #333;
}
#searchBox:focus {
border-color: #3498db;
background-color: #fff;
box-shadow: 0 0 6px rgba(52, 152, 219, 0.3);
}
#searchBox::placeholder {
color: #999;
font-style: italic;
}
#noResults {
display: none;
font-size: 13px;
color: #e74c3c;
font-weight: 500;
white-space: nowrap;
}
#showAllBtn {
display: none; /* hidden by default */
background: #e5672d;
color: #fff;
padding: 0 10px;
border: 1px solid #e5672d;
line-height: 26px;
border-radius: 5px;
font-size: 13px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#showAllBtn:hover {
background-color: #e5672d;
}
$(document).ready(function () {
$('#searchBox').on('input', function () {
const query = $(this).val().toLowerCase();
// Toggle Clear button visibility
if (query.length > 0) {
$('#showAllBtn').fadeIn(200);
} else {
$('#showAllBtn').fadeOut(200);
}
if (query.length < 3) {
$('.toolkit-boxes').each(function () {
$(this).stop(true, true).fadeIn(400);
});
$('#noResults').hide();
return;
}
let matchFound = false;
$('.toolkit-boxes').each(function () {
const name = $(this).attr('toolkit-name').toLowerCase();
if (name.includes(query)) {
$(this).stop(true, true).fadeIn(400);
matchFound = true;
} else {
$(this).stop(true, true).fadeOut(400);
}
});
if (matchFound) {
$('#noResults').hide();
} else {
$('#noResults').fadeIn(200);
}
});
// Clear button resets search and shows all boxes
$('#showAllBtn').on('click', function () {
$('#searchBox').val('');
$('.toolkit-boxes').each(function () {
$(this).stop(true, true).fadeIn(400);
});
$('#noResults').hide();
$(this).fadeOut(200); // hide Clear button again
});
});
