Inline Search Bar - ELEMENTOR

<style>
/* Search Box Style */
#inPageSearch {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd; /* Light grey border */
    background: #fff;
    font-size: 16px;
    border-radius: 6px;
    margin-bottom: 20px;
    box-sizing: border-box; /* Ensures padding doesn't break layout */
}

/* "No Results" Message Style */
#noResultsMsg {
    display: none; /* Hidden by default */
    color: #666;
    font-style: italic;
    margin-bottom: 20px;
}
</style>

<input type="text" id="inPageSearch" placeholder="Search authors...">

<div id="noResultsMsg">No authors found matching your search.</div>

<script>
jQuery(document).ready(function($) {

    $('#inPageSearch').on('keyup', function() {

        var searchTerm = $(this).val().toLowerCase();
        var matchCount = 0;
        var hasSearchTerm = searchTerm.length > 0;

        // 1. Loop through every element that has the class 'author-container'
        $('.author-container').each(function() {

            // 2. Get all text inside this specific container
            // We use $(this).text() so it grabs headings, paragraphs, buttons - everything inside.
            var containerText = $(this).text().toLowerCase();

            // 3. Check if the search term exists inside that text
            if (containerText.indexOf(searchTerm) > -1) {
                $(this).show(); // Match found, ensure it is visible
                matchCount++;
            } else {
                $(this).hide(); // No match, hide the whole container
            }
        });

        // 4. Handle "No Results" message
        // If we typed something AND found 0 matches, show the message
        if (hasSearchTerm && matchCount === 0) {
            $('#noResultsMsg').show();
        } else {
            $('#noResultsMsg').hide();
        }
    });
});
</script>