- For this to work, any and all rows that contain the searchable blurbs need to have a class of ‘blurb-row’ and be set to a width of 100% with custom gutter width of 1.
- Designate one of these blurb rows (ideally the top one) to be where all search results are displayed by adding an ID of ‘search-result-row’. This is so all results are combined instead of stacking in their original rows.
- This styling is designed to display rows as 4-column on desktop, 2-column on tablet, and 1 column on mobile.
<!– Search Box –>
<input type=”text” id=”divi-search-box” placeholder=”Search entire inventory…” style=”width: 100%; padding: 12px; margin-bottom: 20px; font-size: 16px; border: 1px solid #cccccc; border-radius: 5px; background-color: #f7f7f7; color: #333; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); transition: all 0.3s ease;”>
<!– jQuery for search functionality –>
<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
<script>
jQuery(document).ready(function($) {
var originalBlurbPositions = [];
// Store the original parent row and index for each blurb
$(‘.blurb-row .et_pb_column’).each(function(index) {
originalBlurbPositions.push({
blurb: $(this),
originalParent: $(this).parent()
});
});
$(‘#divi-search-box’).on(‘input’, function() {
var query = $(this).val().toLowerCase().trim();
if (query.length > 0) {
// Clear search-result-row before adding new results
$(‘#search-result-row’).empty();
// Check if any results match
var resultsFound = false;
// Move matching blurbs to the search result row
originalBlurbPositions.forEach(function(item) {
var title = item.blurb.find(‘.et_pb_blurb_content h4’).text().toLowerCase().trim();
if (title.includes(query)) {
item.blurb.removeClass(‘hidden’).appendTo(‘#search-result-row’);
resultsFound = true;
}
});
// Show the search result row if results were found
if (resultsFound) {
$(‘#search-result-row’).show();
} else {
$(‘#search-result-row’).hide().empty().html(‘<div>No results found.</div>’).show();
}
// Hide all original rows except the search-result-row
$(‘.blurb-row’).not(‘#search-result-row’).hide();
} else {
// Show all blurb rows and move blurbs back to their original parents when search box is cleared
$(‘.blurb-row’).show();
$(‘#search-result-row’).empty();
// Move blurbs back to their original parents
originalBlurbPositions.forEach(function(item) {
item.blurb.removeClass(‘hidden’).appendTo(item.originalParent);
});
}
});
});
</script>
<style>
/* Specific styling for the row containing blurb modules */
#search-result-row {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
/* Ensure columns within the search result row take up equal space */
#search-result-row .et_pb_column {
flex: 1 1 25%; /* Default: 4 columns per row */
max-width: 25%;
box-sizing: border-box;
padding: 10px;
}
/* Ensure the blurb content (title and text) is separated from the image */
#search-result-row .et_pb_blurb_content {
text-align: center; /* Center-align text for a cleaner look */
overflow: hidden;
}
/* Hide non-matching blurbs completely */
#search-result-row .hidden {
display: none !important;
}
/* Tablet View: 2 columns */
@media (max-width: 980px) {
#search-result-row .et_pb_column {
flex: 1 1 50%; /* 2 columns per row */
max-width: 50%;
}
}
/* Mobile View: 1 column */
@media (max-width: 767px) {
#search-result-row .et_pb_column {
flex: 1 1 100%; /* 1 column per row */
max-width: 100%;
}
}
</style>
0 Comments