Filter Repeater Rows by Field Value

• stephenburke

• October 3, 2019 at 9:34 pm

Hi Guys,

I have a repeater field on a CPT that has a number of fields, I am wondering is there a way to add a drop down outside the repeater that will hide rows in the repeater based on value.

My example is, one of the text fields in the repeater contains names, I would like to hide full rows in the repeater that dont match the name from the drop down!

This is easy to accomplish on the front end, but I am trying to do it on the backend when editing the CPT!

Any guidance or existing plugins that people know of would be great.

• pawciak

• January 10, 2020 at 1:34 am

Hi did you manage to achieve that? Im looking for the same solution

• John Huebner

• January 10, 2020 at 5:47 am

There aren’t any plugins that I’m aware of that will do this and I can’t really point you do any examples. It would require building custom JS to add to the admin. You’d have to trigger an action when the text field us changed and then you’d have to loop through the repeater rows and hide of show rows based on that.

Here’s a rough, basic example, but there’s no promise it will work. I’m sure I’m not thinking of everything.

(function($){
  if (typeof acf === 'undefined') {
    return;
  }
  // add event to your text field
  // field_XXXXXX represents the field key of your text field
  $(document).on('change', '[data-key="field_XXXXXX"] .acf-input input', function(e) {
    // get the acf field
    var field = acf.getField('field_XXXXXX');
    // get value
    var value = field.val();
    // field_YYYYYY represents your repeater field
    $('[data-key="field_YYYYYY"] .acf-row').each(function(index, row) {
      // field_ZZZZZZ represents the sub field key that you're checking
      $(row).find('[data-key="field_ZZZZZZ"] .acf-input input').each(function(sub_index, sub_element) {
        var sub_value = $(sub_element).val();
        if (value == sub_value) {
          // I'm not sure about this display value, just guessing
          $(row).css('display', 'table-row');
        } else {
           $(row).css('display', 'none');
        }
      });
    });
  });
})(jQuery);