hello a tous je bute sur l'intégration de shuffle.js ...
https://www.com3elles.com/formation.html
la zone de recherche devrait être réactive ....
mais cela me renvois cette erreur
Uncaught TypeError: Cannot read property 'textContent' of null
at HTMLAnchorElement.<anonymous> (components/com_flexicontent/templates/fiche-realisation-2/js/flexishuffle.js:195)
at e.value (769f626d67bfc69fcea38a9cdfa58d55_0.js:479)
at 769f626d67bfc69fcea38a9cdfa58d55_0.js:479
at Array.forEach (<anonymous>)
at e.value (769f626d67bfc69fcea38a9cdfa58d55_0.js:479)
at e.value (769f626d67bfc69fcea38a9cdfa58d55_0.js:479)
at e.value (769f626d67bfc69fcea38a9cdfa58d55_0.js:479)
at Demo._handleSearchKeyup (components/com_flexicontent/templates/fiche-realisation-2/js/flexishuffle.js:180)
dans mon js
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 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('.picture-item__title');
    var titleText = titleElement.textContent.toLowerCase().trim();
    return titleText.indexOf(searchText) !== -1;
  });
};
Dans mon html la balise est ok
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
<div class=" filters-group">
        <input class="textfield filter__search js-shuffle-search" type="search" id="filters-search-input" placeholder="Rechercher">
    </div>

et à la fin de mon js
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
   document.addEventListener('DOMContentLoaded', function () {
 
  window.demo = new Demo(document.getElementById('grid'));
 
});
Merci d'avance !