Search Issue in the theme

Every request sent to http://example.com/?s=string will result in a search query, WordPress will use the search.php to render the output. It doesn’t matter where the request is came from.

If you need to do an AJAX search, you have to write your own function to do the search and then return it. I have an answer here, fully explaining how to implement AJAX in your WordPress installation.

Follow the instructions, and write your own query as follows to do the search:

$args =  array(
    's' => $string // This is how a search functions
    'posts_per_page' => 4
);
$query = new WP_Query($args);
// Now save your query in an array using a loop and return it

To do a live search, you have to bind an action to the keyup or keydown using jQuery. You might as well want to check the user’s input value, since searching for strings lower than 3 characters isn’t always a good idea.

So, assuming you are following the linked answer, and your input’s ID is my-ajax-search, this will send an AJAX request each time user enters anything longer than 3 characters, and append the results to an element that has an ID of $ajax-results:

(function($){
    $('#my-ajax-search').on('keyup',function(){
        var searchString = $(this).value();
        // Check the input value's length
        if (searchString .length > 3) {
            $.get( 'http://example.com/wpnovice/ajax_search/', {
                ajaxString: searchString
            }).done( function( response ) {
                if ( response != null) {
                    $.each(response, function(index, el) {
                        $('#ajax-results').append(
                            '<a href="'+el.url+'">'+
                                '<img src="'+el.thumbnail+'" alt="'+el.title+'"/>'+
                                '<span>'+el.title+'</span>'+
                            '</a>'
                        );
                    });
                }
            });
        }
    });
})(jQuery);

Now let’s register a REST route in the back-end and return the search query:

add_action( 'rest_api_init', function () {
    //Path to AJAX endpoint
    register_rest_route( 'wpnovice', '/ajax_search/', array(
            'methods' => 'GET', 
            'callback' => 'wpnovice_ajax_search' 
    ) );
});
function wpnovice_ajax_search() {
    if (isset($_GET['ajaxString'])) {
        $string = $_GET['ajaxString'];
        $ajax_search = new WP_Query(array( 
                        'posts_per_page' => 8,
                        's' => $string,
                    ));
        if ($ajax_search->have_posts()){
            while ($ajax_search->have_posts()){
                $ajax_search->the_post();
                $data_inner['title'] = get_the_title();
                $data_inner['url'] = get_the_permalink();
                if (has_post_thumbnail()) {
                    $data_inner['thumbnail'] = get_the_post_thumbnail_url(get_the_ID(),'thumbnail');
                }
                $search_result[$ajax_search->current_post] = $data_inner;
            }
            return $search_result;
        } else {
            return null;
        }
    } else {
        return __('You must enter a string to search','text-domain');
    }
}