Search using ACF repeater

Question

You can filter ACF repeater field sub fields on the front end using some jQuery. See basic example below.

See live working demo here: https://jsfiddle.net/joshmoto/ns73z05b/

See comments in jQuery so you know what is happening.

// faq filter input on keyup event
$('#faq').on('keyup', 'INPUT[type="search"]', function(event) {

  // get our elements
  let $faq = $(event.delegateTarget);
  
  // get the search filter value
  let search = $(this).val().replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
  
  // get the repeater list in faq object
  let $repeater = $('.repeater', $faq);
  
  // items visible counter
  let itemsVisible = 0;

  // return false early if we dont have a list
  if ($repeater.length < 1) return false;

  // loop through each item in the repeater list
  $("LI:not('.filter-no-results')", $repeater).each(function(key, item) {

    // store our q and a text
    let text = $(this).text();

    // check if the item is visible using regular expression match
    let itemVisible = text.match(new RegExp(search, 'i'));

    // remove these classes
    $(item).removeClass('filter-visible filter-hidden');

    // check if we have a match
    $(item).addClass('filter-' + (itemVisible ? 'visible' : 'hidden'));

    // if item is visible, increment our count
    if (itemVisible) ++itemsVisible;

  });

  // check if we have no items visible then show hide no results message
  if (itemsVisible === 0) {
    $('LI.filter-no-results', $repeater).show();
  } else {
    $('LI.filter-no-results', $repeater).hide();
  }

});

<?php 

// Check faq repeater field rows exists.
if( have_rows('faq') ): ?>

<div id="faq">

    <input type="search" placeholder="Filter FAQ" />
    
    <ul class="repeater">
    
        <?php // Loop through questions and answers.
        while( have_rows('faq') ) : the_row(); ?>

            <li>
                <div data-question><?=get_sub_field('question')?></div>
                <div data-answer><?=get_sub_field('answer')?></div>
            </li>

        <?php // End loop.
        endwhile; ?>
    
        <li class="filter-no-results">
            No results found in repeater fields.
        </li>

    </ul>

</div>

<?php // end.
endif; ?>

#faq {
  padding: 1rem;
}

INPUT[type="search"] {
  margin-bottom: 1rem;
}

.repeater LI {
  margin-bottom: 1rem;
}

[data-question]::before {
  content: 'Q. ';
  font-weight: bold;
}

[data-answer]::before {
  content: 'A. ';
  font-weight: bold;
}

.filter-visible {
  display: block;
}

.filter-hidden {
  display: none;
}

.filter-no-results {
  display: none;
}

Here is another slightly more adapted version where it highlights your searched text by wrapping matched text with a <mark> tag.

https://jsfiddle.net/joshmoto/hg5eqn8f/1/

Related Posts: