Как исправить ошибку?

Question

[sergey]

Сделал по примеру shuffle.js свою сортировку, фильтрацию и поиск, результат jsfiddle - все отлично работает.
Перенес этот пример на рабочий сайт, и тут возникла проблема с поиском.
При заполнении поля поиска возникает в консоли туча ошибок, при чем на каждый введенный символ:

Uncaught TypeError: Cannot read property 'textContent' of null
at HTMLDivElement. (script.js:197)
at e.value (vendor.js:6266)
at vendor.js:6266
at Array.forEach ()
at e.value (vendor.js:6266)
at e.value (vendor.js:6266)
at e.value (vendor.js:6266)
at Demo._handleSearchKeyup (script.js:182)

когда ищешь причину возникновения этой ошибки, то консоль указывает на эту строку:

var titleText = titleElement.textContent.toLowerCase().trim(); //а именно на toLowerCase().trim();

В целом код поиска можно увидеть на фиддле, все перенес один к одному, ничего не менял.
Не могу понять причину сего и главное как побороть? Буду признателен за любую помощь. Спасибо.

Код поиска:

// Advanced filtering
Demo.prototype.addSearchFilter = function() {
    var searchInput = document.querySelector('.js-shuffle-search');

    if (!searchInput) {
        return;
    }

    searchInput.addEventListener('keyup', this._handleSearchKeyup.bind(this));
};

/**
 * Filter the shuffle instance by items with a title that matches the search input.
 * @param {Event} evt Event object.
 */
Demo.prototype._handleSearchKeyup = function(evt) {
    var searchText = evt.target.value.toLowerCase();

    this.shuffle.filter(function(element, shuffle) {

        // If there is a current filter applied, ignore elements that don't match it.
        if (shuffle.group !== Shuffle.ALL_ITEMS) {
            // Get the item's groups.
            var groups = JSON.parse(element.getAttribute('data-groups'));
            var isElementInCurrentGroup = groups.indexOf(shuffle.group) !== -1;

            // Only search elements in the current group
            if (!isElementInCurrentGroup) {
                return false;
            }
        }

        var titleElement = element.querySelector('.title');
        var titleText = titleElement.textContent.toLowerCase().trim();

        return titleText.indexOf(searchText) !== -1;
    });
};

Answer 1

[sergey]

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

<div class="col-3@xs col-4@sm col-3@md col-2@lg product-item-inner" data-groups='[""]' data-status="" data-date-created="" data-title="">
  <img class="transform-x-y" src="{% static 'jl/cd/img/plus.png' %}" alt="plus">
</div>

Answer 2

[Егор Живагин]

Код большой, постороннему разбираться долговато, поэтому по ошибке отвечу^
У вас titleElement равен null . Ну, то есть нету его, соответственно, неоткуда взяться свойству textContent . Проверьте правильность селектора в querySelector и есть ли он у вас на странице.

Comments

[sergey]

Это я понял, но в коде ошибки нет, на фиддл все работает:
код поиска:

<input class="textfield filter__search js-shuffle-search" type="search" id="filters-search-input" />

title указан в продукте,
код именно поиска js

// Advanced filtering
Demo.prototype.addSearchFilter = function() {
    var searchInput = document.querySelector('.js-shuffle-search');

    if (!searchInput) {
        return;
    }

    searchInput.addEventListener('keyup', this._handleSearchKeyup.bind(this));
};

/**
 * Filter the shuffle instance by items with a title that matches the search input.
 * @param {Event} evt Event object.
 */
Demo.prototype._handleSearchKeyup = function(evt) {
    var searchText = evt.target.value.toLowerCase();

    this.shuffle.filter(function(element, shuffle) {

        // If there is a current filter applied, ignore elements that don't match it.
        if (shuffle.group !== Shuffle.ALL_ITEMS) {
            // Get the item's groups.
            var groups = JSON.parse(element.getAttribute('data-groups'));
            var isElementInCurrentGroup = groups.indexOf(shuffle.group) !== -1;

            // Only search elements in the current group
            if (!isElementInCurrentGroup) {
                return false;
            }
        }

        var titleElement = element.querySelector('.title');
        var titleText = titleElement.textContent.toLowerCase().trim();

        return titleText.indexOf(searchText) !== -1;
    });
};

повторюсь на фиддл все работает, перенес в рабочую область проекта, и поиск выдает ошибку...