1

I am trying to create a search functionality with AJAX so it will load posts. It currently does not show the results.

I took this code from another post and played around with it as the completed code was sent privately.

Any help would be greatly appreciated.

functions.php file code

// the ajax function
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' => 'post' ) );
    if( $the_query->have_posts() ) :
        while( $the_query->have_posts() ): $the_query->the_post(); ?>

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

        <?php endwhile;
        wp_reset_postdata();  
    endif;

    die();
}}

Script (in functions.php)

// add the ajax fetch js
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: 'post',
        data: { action: 'data_fetch', keyword: jQuery('#keyword').val() },
        success: function(data) {
            jQuery('#datafetch').html( data );
        }
    });

}
</script>

html

<input type="text" name="keyword" id="keyword" onkeyup="fetch()">

<div id="datafetch">Search results will appear here</div>
Peter
  • 777
  • 2
  • 13
  • 34
Abi Saunders
  • 51
  • 5

2 Answers2

0

You might want to update the method name to 'POST' as javascript is case sensitive

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 );
        }
    });

}

You also might want to do an async call which needs callback as above approach will do synchronous call. Check this answer for callback approach jQuery: Return data after ajax call success

RahulB
  • 2,070
  • 1
  • 18
  • 26
0

there are some typos in your code like an extra } and a mising } later in php code. Please try:

functions.php

// the ajax function
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' => 'post' ) );
    if( $the_query->have_posts() ) :
        while( $the_query->have_posts() ): $the_query->the_post(); ?>

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

        <?php endwhile;
        wp_reset_postdata();  
    endif;

    die();
}

// add the ajax fetch js
add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() {
?>
<script type="text/javascript">
        function fetch_search() {
            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 );
                }
            });
        }
    </script>
<?php
}

html

<input type="text" name="keyword" id="keyword" onkeyup="fetch_search()">
<div id="datafetch">Search results will appear here</div>
khoekman
  • 1,153
  • 7
  • 16
  • The post query with -1 will return all the posts you have. maybe you want to limit this to top x posts. I would also consider to add a debounce or throttle on the ajax call to limit the calls see: https://css-tricks.com/the-difference-between-throttling-and-debouncing/ – khoekman Aug 29 '18 at 10:59
  • thanks for your suggestion! None of these amends fixed the issue though. – Abi Saunders Aug 31 '18 at 12:33