Как показать Div, если результат не найден

Question

Когда я что-то ищу в поле поиска и совпадений нет, я хочу отобразить мой div с идентификатором error. Я использую jQuery и плагин изотопов.

Вот код:

$(function() {

  var $grid = $('#container');
  $grid.isotope({
    itemSelector: '.item'
  });

  var filters = []; 

  // BUTTON-SEARCH 
  $('#btn').on('click', function() {
      filters[0] = $('#search')[0].value;
      runFilter();
  });

  var runFilter = function() {
    $grid.isotope({
      filter: function() {
        if (filters[0]) {
          // at least some search text was entered:
          var qsRegex = new RegExp(filters[0], 'gi');

          // if the title doesn't match, eliminate it:
          if (!$(this).find('.content-title').text().match(qsRegex)) {
            return false;
          }
        }
        return true;
      }
    });
  }
});

Answer 1

Так что, глядя на документацию изотоп , есть функция, которую вы можете использовать для получения количества фильтруемых элементов после выполнения фильтрации.

getFilteredItemElements

Возвращает массив отфильтрованных элементов элемента в текущем отсортированном порядке.

( источник )

Похоже, что вы могли бы сделать что-то подобное после кода, который у вас есть выше.

var resultsCount = $grid.isotope('getFilteredItemElements').length;

if (resultsCount < 1) {
  $('#error').show();
} else {
  $('#error').hide();
}

Я бы поместил это в вашу функцию runFilter, чтобы всегда обновляется после обновления фильтра.

Answer 2

Вы можете использовать функции jquery .hide () и .show (), как упомянуто здесь: Jquery, чтобы сделать DIV видимым / невидимым

Просто напишите

$('#Error').show();