Template issues getting ajax search results

When you load a template file directly that way, you’re not loading the WordPress environment, so no WordPress functions are available.

Your two options are to either load the search page on the front end and filter the result, like:

$('#results').load('http://mysite.com/?s=searchterm ul#target');

Or build a search function using WordPress provided AJAX functionality, see AJAX in Plugins.

EDIT

Here’s an example of how I load additional posts via AJAX which you could adapt to create a search function if you wish.

First, in functions.php, I enqueue my javascript and localize the script to pass the AJAX URL that will process my requests. WordPress AJAX uses admin-ajax.php to process all AJAX requests, front or back end:

add_action( 'wp_enqueue_scripts', 'wpa56343_scripts', 100 );

function wpa56343_scripts() {
    wp_enqueue_script(
        'wpa56343_script',
        get_template_directory_uri() . '/js/scripts.js?ver=1.0',
        array( 'jquery' ),
        null,
        false
    );
    wp_localize_script(
        'wpa56343_script',
        'WPaAjax',
        array(
            'ajaxurl' => admin_url( 'admin-ajax.php' )
        )
    );
}

In scripts.js, my javascript that calls my AJAX action, and passes a postoffset var so I can pass that to the query. Note also the use of WPaAjax.ajaxurl to pass the URL that will process this request:

jQuery(document).ready(function($){

    $('#blog-more').click(function(e){ // <- added
        e.preventDefault(); // <- added to prevent normal form submission
        var postoffset = $('.post').length;
        $.post(
            WPaAjax.ajaxurl,
            {
                action : 'wpa56343_more',
                postoffset : postoffset
            },
            function( response ) {
                $('#container').append( response );
            }
        );
    });

});

In functions.php, the function that processes my AJAX request mapped to the action I passed in the javascript above. A stripped down version of WordPress is bootstrapped, so I can access most WordPress functions:

add_action('wp_ajax_wpa56343_more', 'wpa56343_more');
add_action('wp_ajax_nopriv_wpa56343_more', 'wpa56343_more');

function wpa56343_more(){
    global $wp_query;

    $offset = $_POST['postoffset'];
    $args = array(
        'offset' => $offset,
        'posts_per_page' => 10
    );
    $wp_query = new WP_Query( $args );

    get_template_part( 'post-template' );

    exit;
}

Leave a Comment