用于搜索结果的Wordpress Ajax - 查询仅返回1个结果

Question

Here is my problem, I've been trying to create a Ajax call to get my search results but my problem is that I can only retrieve 1 result in json. There is some problem with my loop which I can't understand so far.

Here is my HTML, where the results should be loaded from the ajax action.

<div id="project-grid">
</div>

I call the jQuery

$(document).ready(function($) {
     search_things();
});

function search_things(){
    var searchformdata = new FormData();
    searchformdata.append('action','search_results');
    $.ajax({
        method: 'post',
        url: ajaxurl,
        dataType: 'json',
        data: searchformdata,
        processData: false,
        contentType: false,
        beforeSend:function(data){
            //alert(searchformdata);
            //console.log(searchformdata);
            $('#project-grid').html('Loading...');
        },
        success:function(data) {
            $('#project-grid').append(data.projectsresults);
            //console.log(data.projectsresults);
            //alert(data.projects);
        },
        error: function(data){
            //console.log(data);
        }
    });
    //alert("a");
}

Now, of course I've created this little fuction in my functions.php

add_action('wp_ajax_nopriv_search_results', 'search_results');
add_action('wp_ajax_search_results', 'search_results');
function search_results(){
    $returnprojects = return_query_projects();
    $response = array('projectsresults' => $returnprojects);
    wp_send_json( $response );
}

Which calls the return_query_projects() (where my loop is stored) looking like:

function return_query_projects(){
        global $wp_query, $query_string;
        $query_vars = $wp_query->query_vars;
        $post_per_page = 10;
        $closed = array(
                'key' => 'closed',
                'value' => "0",
                'compare' => '='
        );
        $args = array(
            'post_type' => 'project',
            'order' => 'DESC', 
            'orderby' => 'date', 
            'posts_per_page' => $post_per_page,
            'paged' => 1,
            'meta_query' => array(
                'relation' => 'AND',
                $closed,
            ),
            'post_status' => array('publish'),
        );
        $html = array();
        query_posts($args);
        if ( have_posts() ): 
            while ( have_posts() ) : the_post();
                $html = get_post_main_function();
            endwhile;
        else:
            $html = '<div style="color:#fff; margin-top:15px">' . __('No projects posted here yet.',"Dev") . '</div>';
        endif;
        return $html;
    }

As you can see, I've created a kind of box in another box with the hope to take it flexible. So my last function get_post_main_function(); is something like this:

function get_post_main_function()
{ 
  global $post, $current_user;
  wp_get_current_user();
  $pid = get_the_id();
  //Some other variables

  $html = array();
  $html = '<div class="card project" id="post-' . $pid . '">';

  //other code for structure

  $html = '</div>';
  return $html;
}

This code is returning 1 only post, but I know there are many others. What's going wrong? I suppose there is something in the post loop but I don't know how to fix it. Can you give me some directions? Thanks.

Answer 1

Use $html.push() in place of adding $html as string

Try this $html.push(get_post_main_function()) in place of $html=get_post_main_function()