How to add the search page link to the anchor tag?

I have a search field and when the user enters anything in the field then it will display the page name in the dropdown. Now Once the user selects the page then I have to redirect to the search page where the content will display.

My issue is, I have to link the search page so that it will redirect to the search page.

function searchList(){
    $output='';
    $output.='<div class="text-left search-form-wrapper"> 
   <div class="input-group mb-3">
  <button class="btn" type="button" id="button-addon-search"><img src="/wp-content/uploads/2021/09/search-normal.svg" alt=""></button>
  <input type="text" class="form-control" placeholder="Search" id="searchdoc" aria-describedby="button-addon-search">
  <div id="searchResult"></div><!--this will show the search output-->
 </div>

  </div>';

  $output.='<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
  (function($) {  // ready handler
$("#searchdoc").keypress(function() {
     $.ajax({
        url: "/wp-admin/admin-ajax.php",
        type: "post",
        data: { action: "searchdoc", keyword: $("#searchdoc").val() },
        success: function(data) {
            $("#searchResult").html(data);
        }
    });
    });

    })(jQuery);

</script>';
    return $output;
}
add_shortcode( 'searchField', 'searchList');


add_action('wp_ajax_searchdoc','searchdoc');
add_action('wp_ajax_nopriv_searchdoc','searchdoc');
function searchdoc(){

$pages = get_pages(); 
$option ='<ul>';
if($pages>0){
 foreach ( $pages as $page ) {
    $option .= '<li><a href="' . get_page_link( $page->ID ) . '">'.$page->post_title.'</a></li>';
  }
}
else{
        $option .= '<li>Not found</li>';
}
$option .='</ul>';
 
 echo $option;
}