Integrate admin plugin into template. Very interesant (live search + autocomplete with wp rest api, in vanilla js)

I need a live search with wp rest api with autocomplete, in vanilla js. I found this plugin makes exacly what I needed. (I dont need this code as a plugin, its not a problem, but if it helps to make it easier, if anyone knows how to do this code works without it beign a plugin, let me know.)

TUTORIAL: https://sabrinazeidan.com/wp-rest-api-search-with-autocomplete-with-vanilla-js/

Github: https://github.com/sabrina-zeidan/sz-rest-api-tut

In this case, the plugin creates a page into the tools section but it doesnt gives me support to integrate it into the template , and I dont know how execute it into the template by myself. The code is shown above:

<?php /**  * Plugin Name: SZ WP REST API Tutorial  * Description: It's an example of WP REST API usage for search with autocomplete with vanilla JS  * Plugin URI:    * Author:      Sabrina Zeidan  * Author URI:  https://sabrinazeidan.com  * License:     GNU General Public License v2 or later  * License URI: http://www.gnu.org/licenses/gpl-2.0.html  *  */  defined( 'ABSPATH' ) or die();  class SZ_WP_REST_API_Tut {      function __construct() {                 add_action( 'admin_menu', array( $  this, 'admin_menu' ) ); //Add an item to the Tools menu                add_filter('plugin_action_links_' . plugin_basename(__FILE__), array( $  this, 'plugin_actions_links' ) ); //Add a link on Plugins page                  add_action( 'rest_api_init', array( $  this, 'rest_api_init') ); // Initialize the REST API routes.            }        public function admin_menu() {            $  hook = add_management_page( 'SZ WP REST API', 'SZ WP REST API', 'manage_options', 'sz-search', array( $  this, 'admin_page_content' )); //Add a page to the Tools menu            add_action( "load-$  hook", array( $  this, 'admin_page_load' ) );//hook to load stuff on that page     }     function plugin_actions_links( array $  actions ) {             return array_merge( array(             'sz-search'    => sprintf('<a href="%s">%s</a>', esc_url( admin_url( 'tools.php?page=sz-search' ) ),esc_html__( 'See it', '' ))), $  actions );     }     function admin_page_load() {         add_action( 'admin_enqueue_scripts', array( $  this, 'enqueue_scripts' ) ); // Load needed JavaScript and CSS          }          function enqueue_scripts() {             wp_enqueue_style( 'awesomplete-css', plugin_dir_url( __FILE__ ) . 'awesomplete/awesomplete.css'); //Awesomplete widget             wp_enqueue_script('awesomplete-js', plugin_dir_url( __FILE__ ) . 'awesomplete/awesomplete.js'); //Awesomplete widget             wp_enqueue_script('sz-search', plugin_dir_url( __FILE__ ) . 'search.js', array('awesomplete-js')); //Our Awesomplete settings are here             wp_localize_script('sz-search', 'szsearch', array(                 'search_url' => home_url( '/wp-json/sz-search/search?term=' ), // URL to access REST API endpoint                 'nonce' => wp_create_nonce('wp_rest') ) //For authorization             );       }          function rest_api_init() {          register_rest_route( 'sz-search', '/search', array(              'methods'  => 'GET',             'callback' => array( $  this, 'sz_rest_api_search'), //exactly how we search             'permission_callback' => function( WP_REST_Request $  request ) { return current_user_can( 'manage_options' ); } //Restrict endpoint to  internal calls          ) );     }          function sz_rest_api_search( WP_REST_Request $  request ) {         $  search_term = $  request->get_param( 'term' );//Our input from the field         if ( empty( $  search_term ) ) {             return;         }                //The way we're gonna search             $  args = array(                 'post_type' => 'post',                 'post_status' => 'publish',                 'posts_per_page'   => 3,                 'fields'   => 'ids',                 's'             => $  search_term,                 'no_found_rows' => true,                   'update_post_meta_cache' => false,                 'update_post_term_cache' => false,                 );             $  the_query = new WP_Query( $  args );                                          $  this_blog_found_posts = $  the_query->posts;                 $  temp = array();                 foreach( $  this_blog_found_posts as $  key => $  post_id) {                      $  temp = array(                         'ID' => $  post_id,                         'permalink' => get_permalink($  post_id),                         'label' => get_the_title($  post_id),                         );                     $  posts[] = $  temp;                                                            }                         if (!empty($  posts)) return $  posts;     }             function admin_page_content() {         echo '<div class="wrap">';         echo '<h1>' . esc_html_x( 'SZ WP REST API Search with autocomplete with Vanilla JavaScript', 'admin page title', 'sz-wp-rest-api-search' ) . '</h1>';                echo '<p>This is a search field intended to demostrate a result of WP REST API. Does it work? :)</br>';         echo '<p><input type="text" size="80" id="sz-search-field" name="sz-search-field" value="" placeholder="Start typing the title of the post...">';//Our search field         echo '<br><input type="hidden" size="80" id="sz_result_id" name="sz_result_id" value="">';//Hidden field to pass post ID         echo '<br><input type="hidden" size="80" id="sz_result_permalink" name="sz_result_permalink" value="">';//Hidden field to pass post permalink         echo '</div>';     } } new SZ_WP_REST_API_Tut(); //Let's do it! ?> 

What Ive tried is to create the object, and then call the function that shows the input field.

<?php     $  search = new SZ_WP_REST_API_Tut();     $  search->admin_page_content(); ?> 

This shows the input field, but it doesnt make the live search works. I would try more solutions by myself but in this case I dont know what more can I do, I’m stucked.