CMS dynamic search not filtering collection

Design help Custom code
1

On my site, I’m building a CMS with filter buttons and search bar. The filter buttons work great thanks to this tutorial and website by @sabanna and I want to continue using MixItUp for the search bar. This page by @SidneyOttelohe is the best example that I have found and am trying to replicate the search feature, but it just isn’t filtering for searched items in the CMS.

For custom code, below is my snippet of footer code for incorporating the search bar from @SidneyOttelohe’s project. This might be where the issue is but I haven’t been able to figure it out.

<!---Scripts to make the search bar work --->

<script>
  // disable search from submitting
  $('#quicksearch').on('keyup keypress', function(e) {
    const keyCode = e.keyCode || e.which;
    if (keyCode === 13) {
      e.preventDefault();
      return false;
    }
  });
  
  // document ready wrapper
  $(document).ready(function() {

    // quick search regex
    let qsRegex;

    // init Isotope
    const $grid = $('.grid').isotope({
      itemSelector: '.w-dyn-item',
      stagger: 30,
      filter: function() {
        var $this = $(this);
        var searchResult = qsRegex ? $this.text().match(qsRegex) : true;
        return searchResult;
      }
    });

    // reveal all items after init
    const $items = $grid.find('.w-dyn-item');
    $grid.addClass('is-showing-items').isotope('revealItemElements', $items);

    // use value of search field to filter
    const $quicksearch = $('#quicksearch').keyup(debounce(function() {
      qsRegex = new RegExp($quicksearch.val(), 'gi');
      $grid.isotope();
    }));

    // debounce so filtering doesn't happen every millisecond
    function debounce(fn, threshold) {
      let timeout;
      return function debounced() {
        if (timeout) {
          clearTimeout(timeout);
        }

        function delayed() {
          fn();
          timeout = null;
        }
        setTimeout(delayed, threshold || 100);
      };
    };

  });
</script>

Further below is my snippet of footer code from @sabanna’s tutorial on filtering category buttons and it works great (no problems, just adding for context)!

<!--- // 1) Connecting MixItUp JS library using public CDN link --->

<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.0/mixitup.min.js">
</script>

<script>

// 2) Reusable function to convert any string/text to css-friendly format
  var conv = function (str) {
    if (!str) {
        str = 'empty';
    }  return str.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '')
              .replace(/ /g, "-")
              .toLowerCase()
              .trim();
  };

// 3) Creating dynamic elements classes from its categories for filtering:
  var catArray = document.querySelectorAll('.w-dyn-item .filter-category');
  catArray.forEach( function(elem) {
    var text = elem.innerText || elem.innerContent;
    var className = conv(text);
    elem.parentElement.parentElement.classList.add(className);
  });

// 4) Creating custom data-date attributes from blog dates:
  var sortArray = document.querySelectorAll('.w-dyn-item .sort-category');
  sortArray.forEach( function(sortElem) {
    var sortText = sortElem.innerText || sortElem.innerContent;
    sortElem.parentElement.parentElement.setAttribute('data-date', sortText);
  });

// 5) Set the reference to the container. Use the class-name of your Collection List or ID of the Collection List
  var containerEl = document.querySelector('.collection-list');

// 6) Call the MixitUp plugin
  mixitup(containerEl);

</script>

I’m not certain where I’m going wrong and any advice is greatly appreciated, cheers!

2

Got it working! Here’s what the custom code looks like (just the snippet relevant to the search bar)

<script src="https://npmcdn.com/isotope-layout@3.0/dist/isotope.pkgd.min.js"></script>

<script>
  // document ready wrapper
  $(document).ready(function() {

    // disable search from submitting
    $('#quicksearch').on('keyup keypress', function(e) {
      const keyCode = e.keyCode || e.which;
      if (keyCode === 13) {
        e.preventDefault();
        return false;
      }
    });
    // find all filter buttons
    const filterToggles = document.querySelectorAll('[data-filter]');

    // go over each filter button
    filterToggles.forEach(function(toggle) {

      let attrVal = toggle.getAttribute(['data-filter']);
      // find the filter attr
      let newVal = attrVal.toLowerCase().replace(' ', '-');
      // hyphenate filter attr val
      toggle.setAttribute('data-filter', newVal);
      // set filter attr with new val

    });

    // quick search regex
    let qsRegex;

    // init Isotope
    const $grid = $('.grid').isotope({
      itemSelector: '.w-dyn-item',
      stagger: 30,
      filter: function() {
        var $this = $(this);
        var searchResult = qsRegex ? $this.text().match(qsRegex) : true;
        return searchResult;
      }
    });

    // reveal all items after init
    const $items = $grid.find('.w-dyn-item');
    $grid.addClass('is-showing-items').isotope('revealItemElements', $items);


    // use value of search field to filter
    const $quicksearch = $('#quicksearch').keyup(debounce(function() {
      qsRegex = new RegExp($quicksearch.val(), 'gi');
      $grid.isotope();
    }));


    // debounce so filtering doesn't happen every millisecond
    function debounce(fn, threshold) {
      let timeout;
      return function debounced() {
        if (timeout) {
          clearTimeout(timeout);
        }

        function delayed() {
          fn();
          timeout = null;
        }
        setTimeout(delayed, threshold || 100);
      };
    };
  });
</script>
3

Amazing! Can you use the search bar as well as categories? Or not together?