Loadmore search results not showing new results?

Question

I have search results which will show load more button but when search for new result it is started from the already incremented value how to avoid this

     jQuery(document).on("click", '#load-more', function(event) { 
 
      //jQuery("#more_posts").css("display",'none'); // Disable the button, temp.
         var get_query_value = jQuery('body').find('#s').val();
 
    jQuery("#loadingImage").show();
       load_main_posts(get_query_value);
  });

  var ppp = 3; // Post per page 
      var  pageNumbers = 1; 
 function load_main_posts(get_query_value){ 
     
  var $latest_content = jQuery('#latest_content'); 
pageNumbers++;   
    var str1 = 'pageNumber=' + pageNumbers + '&ppp=' + ppp+ '&action=load_search_results'+ 
   '&query='+get_query_value ;   
       //console.log(str1) ;
       jQuery.ajax({
        type: "POST",
     dataType: "json",
      url : myAjax.ajaxurl,
      data : str1,     
     
    success: function(response){   
        console.log(pageNumbers);
        console.log(response.length);
         if (pageNumbers >= response.max) {
            console.log("teststa");
            jQuery("#load-more").hide();
         }          
         jQuery("#ajax-posts").append(response.html);    
         jQuery("#loadingImage").hide();         
    },
    error : function(jqXHR, textStatus, errorThrown) {
       console.log("error");
    }

});
return false;

}

Answer 1

It seems you have hardcoded your pageNumber as 1 always.

var  pageNumbers = 1; 

So every time you click on "Load More" this value will be incrementing even if you are searching for new term.

My approach would be to store the pageNumber value in "Load More" button.

<button data-pageNumber="1" id="load-more">Load More</button>

And when you click on load more just update the data-pageNumber to +1.

And if you do a new search then update the value back to "1".