Блог

Я использую InfiniteScroll:

 var infScroll = new InfiniteScroll( '.grid', {
  path: function() {

    var pageNumber = ( this.loadCount   1 );

    var apiUrlQuery = $('.pagination__next').attr('href')   'amp;page='   pageNumber;

    return apiUrlQuery;
  },
  responseType: 'text',
  status: '.scroll-status',
  history: false
});
  

Но теперь мне нужно реализовать поиск, так что это означает, что мне нужно обновить путь и сетку. Как это сделать?

Пока что я сделал следующее:

 $('.search-events').on('click', function() {

  infScroll.destroy();

  /* building search query */

  $('.grid-item').remove(); //Remove items visually from the grid

  var apiUrlQuery = baseUrl   "amp;"   searchBy   "="   searchTerm;
  $('.pagination__next').attr('href', apiUrlQuery); //Update search url

    infScroll.create();

    infScroll.isLoading = false;

    infScroll.loadNextPage();
})
  

При этом я выполняю новый запрос, используя новый URL, и получаю результаты, но они не выводятся на экран, также я вижу, что высота сетки по-прежнему такая же, как если бы я не удалял элементы сетки.

Есть идеи?

Я, наконец, заставил это работать:

 $('.search-events').on('click', function() {
   msnry.remove($('.grid').find('.grid-item'));
   var apiUrlQuery = baseUrl   "amp;"   searchBy   "="   searchTerm;

    $('.pagination__next').attr('href', apiUrlQuery);

    infScroll.isLoading = false;
    infScroll.canLoad = true;
    infScroll.create();

    msnry.layout();

    infScroll.loadNextPage();
})
  

Эта строка удаляет элементы из DOM, как я сделал с $ (‘.grid-item’).remove(), но также удаляет их из некоторого внутреннего массива, в котором хранятся данные.

 msnry.remove($('.grid').find('.grid-item'));
  

Кроме того, я удалил infScroll.destroy(); потому что это отсоединяет от метода load.

Ключевая часть — msnry.layout(); она перестраивает макет.

Надеюсь, это поможет кому-нибудь в будущем.