(Squarespace) How to add Search Bar on Portfolio Page

[tuanphan]

To add Search Bar on Portfolio Page, like this.

You can use this code to Portfolio Page Header Injection

You can also use UF Plugin, so you can add Search easier without using complex code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  div#gridThumbs {
    padding-top: 10px;
}
.portfolio-search-container {
    position: relative;
    margin-bottom: 20px;
}
.portfolio-search-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}
.portfolio-search-input {
    background: white;
    color: black;
    border: 1px solid #ccc;
    padding: 10px 15px;
    border-radius: 5px;
    width: 300px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.3s ease;
}
.portfolio-search-input:focus {
    border-color: #007cba;
}
.portfolio-search-input::placeholder {
    color: #999;
}
.portfolio-title .highlight {
    background-color: yellow;
    color: black;
}
.grid-item.hidden {
    display: none;
}
</style>
<script>
$(document).ready(function() {
    var searchContainer = $('<div class="portfolio-search-container"></div>');
    var searchWrapper = $('<div class="portfolio-search-wrapper"></div>');
    var searchInput = $('<input type="text" class="portfolio-search-input" placeholder="Enter a keyword to search...">');
    
    searchWrapper.append(searchInput);
    searchContainer.append(searchWrapper);
    
    $('#gridThumbs').before(searchContainer);
    
    searchInput.on('input', function() {
        var searchTerm = $(this).val().toLowerCase().trim();
        var gridItems = $('#gridThumbs .grid-item');
        
        if (searchTerm === '') {
            gridItems.removeClass('hidden');
            $('.portfolio-title').each(function() {
                var originalText = $(this).data('original-text') || $(this).text();
                $(this).html(originalText);
            });
            return;
        }
        
        gridItems.each(function() {
            var $item = $(this);
            var $title = $item.find('.portfolio-title');
            var titleText = $title.text().toLowerCase();
            var originalText = $title.data('original-text') || $title.text();
            
            if (!$title.data('original-text')) {
                $title.data('original-text', originalText);
            }
            
            if (titleText.includes(searchTerm)) {
                $item.removeClass('hidden');
                
                var regex = new RegExp('(' + searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'gi');
                var highlightedText = originalText.replace(regex, '<span class="highlight">$1</span>');
                $title.html(highlightedText);
            } else {
                $item.addClass('hidden');
                $title.html(originalText);
            }
        });
    });
});
</script>

To change yellow highlight, change this line.

To change Search input text, change this line.