I am trying to follow this solution, it is kind of working but I need a list of pages rather than posts.

This is the code that I am working with using Codex information from wordpress but I am getting no results.

functions.php

add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){

$the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( 
$_POST['keyword'] ), 'post_type' => 'page' ) );
if( $the_query->get_pages() ) :
    while( $the_query->get_pages() ): $the_query->get_pages(); ?>

        <h2><a href="<?php echo esc_url( get_permalink() ); ?>"><?php the_title();?></a></h2>

    <?php endwhile;
    wp_reset_postdata();  
endif;

die();
}

Ajax Call:

add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() {
?>

<script type="text/javascript">

function fetch(){
jQuery.ajax({
    url: '<?php echo admin_url('admin-ajax.php'); ?>',
    type: 'page',
    data: { action: 'data_fetch', keyword: jQuery('#keyword').val() },
    success: function(data) {
        jQuery('#datafetch').html( data );
    }
});
}
</script>

HTML Form:

<input type="text" name="keyword" id="keyword" onkeyup="fetch()"></input>
<div id="datafetch">Search results will appear here</div>

Could someone please point me towards the right direction. Thanks

I am trying to follow this solution, it is kind of working but I need a list of pages rather than posts.

This is the code that I am working with using Codex information from wordpress but I am getting no results.

functions.php

add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){

$the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( 
$_POST['keyword'] ), 'post_type' => 'page' ) );
if( $the_query->get_pages() ) :
    while( $the_query->get_pages() ): $the_query->get_pages(); ?>

        <h2><a href="<?php echo esc_url( get_permalink() ); ?>"><?php the_title();?></a></h2>

    <?php endwhile;
    wp_reset_postdata();  
endif;

die();
}

Ajax Call:

add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() {
?>

<script type="text/javascript">

function fetch(){
jQuery.ajax({
    url: '<?php echo admin_url('admin-ajax.php'); ?>',
    type: 'page',
    data: { action: 'data_fetch', keyword: jQuery('#keyword').val() },
    success: function(data) {
        jQuery('#datafetch').html( data );
    }
});
}
</script>

HTML Form:

<input type="text" name="keyword" id="keyword" onkeyup="fetch()"></input>
<div id="datafetch">Search results will appear here</div>

Could someone please point me towards the right direction. Thanks

• pages
• ajax
• search
• title

• Maybe try removing the die() within the data_fetch() function? – lky Commented Mar 27, 2018 at 15:03
• that didn't worked bro.. is their anything i can do to it to show list of pages rather than posts please? – pv619 Commented Mar 28, 2018 at 7:09

1 Answer 1

There is no get_pages() method in the WP_Query class (for WordPress version 4.9.4).

So in the data_fetch() function, replace the following:

if( $the_query->get_pages() ) :
    while( $the_query->get_pages() ): $the_query->get_pages(); ?>

..with this:

if( $the_query->have_posts() ) :
    while( $the_query->have_posts() ): $the_query->the_post(); ?>

And in the fetch() JS function, set the type to POST, like so:

function fetch(){
jQuery.ajax({
    url: '<?php echo admin_url('admin-ajax.php'); ?>',
    type: 'POST',
    data: { action: 'data_fetch', keyword: jQuery('#keyword').val() },
    success: function(data) {
        jQuery('#datafetch').html( data );
    }
});
}

Hint: In the data_fetch() function, I suggest you to use wp_die() instead of die(). You should also use wp_reset_query() in place of wp_reset_postdata() because you're making a custom WP_Query call.

[EDIT] In reply to the following comment:

Can i please ask on how I can show child pages only of a parent page?

In the HTML form, you can add a hidden input which stores the parent page's ID. And then add the value to the data in the AJAX request. Then in the WP_Query call (in the data_fetch() function), you can use post_parent to set the parent page's ID.

See sample code here.