Support

Account

Home Forums Add-ons Repeater Field Filter Repeater Rows by Field Value

Solving

Filter Repeater Rows by Field Value

  • 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

  • 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);
    
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.