WordPress create a serch form to search in current page

First create search form shortcode

add_shortcode( 'agent_search', 'dtwd_special_agent_search' );
function dtwd_special_agent_search( $atts ) {
 ob_start();?>
 <style>.page_search{display:flex;justify-content:center;align-items:center;margin-top:15px;margin-bottom: 10px;}.page_search button{border-radius:0}.page_search #agent_search{border:1px solid #000}#search_error {text-align: center;color: #fff;text-shadow: 0px 1px red;font-weight: 600;}</style>
  <div class="page_search">
   <input type="text" name="agent_search" id="agent_search" placeholder="Agent Name"><button id="search_btn_agent" type="submit">Search</button>
  </div>
  <div id="search_error"></div>
 <?php $collection = ob_get_clean();
    return $collection;
}

Next add the JS for search

jQuery(document).ready(function($){
    $('#search_btn_agent').click(function(){
        $('#search_error').html('');
        var searchText = $('#agent_search').val().trim().toLowerCase();
        var matchFound = false;
        if(searchText !== ''){
            $('.our-team').each(function(){
                var $currentDiv = $(this);
                var divText = $currentDiv.text().trim().toLowerCase();
                if(divText.includes(searchText)){
                    $currentDiv.show();
                    matchFound = true;
                } else {
                    $currentDiv.hide();
                }
            });
            if(!matchFound) {
               // alert('No match found.');
                $('#search_error').html('No match found! Please search again.');
                $('.our-team').show();
            }
        } else {
            $('.our-team').show();
        }
    });
});