Скачать найденную статью во время прокрутки без refre sh laravel + ajax

Question

Проблема в том, что когда я пишу в поиске «спорт», я получаю все необходимые статьи, связанные со спортом, но дело в том, что, как только я начинаю прокручивать, он отображает все остальные, которые есть. Мне нужно отображать только те статьи, которые соответствуют поисковому запросу. Он делает это, но как только я немного прокручиваю, он показывает забавное изображение, и все.

Если я напишу «климат», то сначала он отображает статьи, соответствующие этому ключевому слову, а затем, когда я прокручиваю вниз, загружаются другие статьи

Контроллер

 public function LoadDataScrool(Request $request){
         $q = Input::get ( 'q' );
         $article_founds = Article::where('meta_keyword','LIKE','%'.$q.'%')->paginate(8);
         $html='';
            if ($request->ajax()) {
            $view = view('blog.search_ajax',compact('article_founds'))->render();
                return response()->json(['html'=>$view]);
            }
            return view('blog.search',compact('article_founds'));     
     }

javascript

var page = 1;
  jQuery(window).scroll(function() {
      if(jQuery(window).scrollTop() + $(window).height() >= $(document).height()) {
          page++;
          loadMoreData(page);
      }
  });
function loadMoreData(page){
    $.ajax(
          {
              url: '?page=' + page,
              type: "get",
              beforeSend: function()
              {
                  jQuery('.ajax-load').show();
              }
          })
          .done(function(data)
          {
              if(data.html == " "){
                  $('.ajax-load').html("Not found");
                  return;
              }
              jQuery('.ajax-load').hide();


    jQuery("#post-dataa").append(data.html);
      })
      .fail(function(jqXHR, ajaxOptions, thrownError)
      {
           // alert('server not responding...');
      });
 }

blog.search_ ajax .blade. php

foreach($article_founds as $post){ ?>
<div class="col-lg-3">
    <a href="{{route('article', $post->slug)}}" target="_blank"></a>
</div> <?php 
}?>

blog.search.blade. php

<div class="row news-small-row"  id="post-dataa">
    @include('blog.search_ajax')
</div>

form

 <form action="/search" method="POST" role="search">
            {{ csrf_field() }}
                <input type="text" class="form-control" name="q" id="searchh" placeholder="find"> 
          </form>

Во время загрузки функция снова вызывается, и, поскольку Q пуст во второй раз, он начинает отображать все записи. И мне нужно, чтобы во время загрузки и прокрутки оставшиеся записи загружались и все. Мне не нужно отображать все остальные записи, не связанные с моим ключевым словом. Мне нужно отобразить только то, что я ввел и все.

Answer 1

Дело в том, что вы не отправляете q по вашему запросу ajax.

Чтобы он работал, вам нужно получить запрос из поля поиска и добавить его в строку запроса.

Отправьте запрос в шаблон

 public function LoadDataScrool(Request $request){
         $q = Input::get ( 'q' );
         $article_founds = Article::where('meta_keyword','LIKE','%'.$q.'%')->paginate(8);
         $html='';
            if ($request->ajax()) {
            $view = view('blog.search_ajax',compact('article_founds'))->render();
                return response()->json(['html'=>$view]);
            }
            return view('blog.search',compact('article_founds', 'q'));     
     }

Сохраните введенное значение после перезагрузки страницы

<form action="/search" method="POST" role="search">
    {{ csrf_field() }}
    <input type="text" class="form-control" name="q" id="searchh" placeholder="find" value="{{ $q }}"> 
</form>

Отправьте поисковый запрос по ajax запросу

var page = 1;
  jQuery(window).scroll(function() {
      if(jQuery(window).scrollTop() + $(window).height() >= $(document).height()) {
          page++;
          let query = jQuery('#searchh').val();
          loadMoreData(page, query);
      }
  });
function loadMoreData(page, query){
    $.ajax(
          {
              url: '?page=' + page + '&q=' + query,
              type: "get",
              beforeSend: function()
              {
                  jQuery('.ajax-load').show();
              }
          })
          .done(function(data)
          {
              if(data.html == " "){
                  $('.ajax-load').html("Not found");
                  return;
              }
              jQuery('.ajax-load').hide();


    jQuery("#post-dataa").append(data.html);
      })
      .fail(function(jqXHR, ajaxOptions, thrownError)
      {
           // alert('server not responding...');
      });
 }