title: ACF filter custom posts by subfield of repeater field
body: <p>I'm following the official <a href="https://www.advancedcustomfields.com/resources/query-posts-custom-fields/" rel="nofollow noreferrer">guide</a> in ACF documentation but hasn't been able to get it right. I'm using Advanced custom fields and Custom post type UI plugins.</p>
  
  <p>I have a custom post type named <strong>materials</strong>, each material has a <strong>files</strong> repeater field, one of the subfield is <strong>title</strong>. I want to query the posts based on the title and put the results onto the page using ajax.</p>
  
  <p>Here's my functions.php:</p>
  
  <pre><code>function materialsSearchAjax() {
  
    $html = "";
    $keyword = $_POST['keyword'];
    // args
    $args = array(
      'numberposts'   =&gt; -1,
      'posts_per_page' =&gt; -1,
      'post_type'     =&gt; 'materials',
      'meta_key'    =&gt; 'type',
      'meta_value'    =&gt; 'students',
      'meta_query'    =&gt;
          array(
              'key'       =&gt; 'files_%_title',
              'compare'   =&gt; 'LIKE',
              'value'     =&gt; $keyword,
      )
    );
  
    $query = new WP_Query( $args );
    $posts = array();
    $html .= '&lt;div class="Materials-students"&gt;';
  
    while( $query-&gt;have_posts() ) : $query-&gt;the_post();
      $html .= '&lt;div class="Files-list u-padding-left--12"&gt;';
        if( have_rows('files') ){
          while ( have_rows('files') ) : the_row();
            $html .= '&lt;div class="Files-item u-margin-right--30 u-margin-bottom--18"&gt;';
            $html .= '&lt;div class="Files-itemImage"&gt;&lt;/div&gt;';
            $html .= '&lt;a href="' . the_sub_field("document") . '" target="_blank" class="Files-itemLink"&gt;';
            $html .= the_sub_field('title');
            $html .= '&lt;/a&gt;';
            $html .= '&lt;/div&gt;';
          endwhile;
        }
      $html .= '&lt;/div&gt;';
    endwhile;
  
    $html .= '&lt;/div&gt;';
  
    wp_reset_query();
    return $html;
  }
  
  // filter
  function materials_where( $where ) {
  
      $where = str_replace("meta_key = 'files_%", "meta_key LIKE 'files_%", $where);
  
      return $where;
  }
  
  function igs_scripts_styles() {
    wp_enqueue_script( 'ajaxMaterialsSearch', get_template_directory_uri() . '/assets/scripts/ajaxMaterialsSearch.js', array(), false, true );
    wp_localize_script( 'ajaxMaterialsSearch', 'ajax_data_object', array( 'url' =&gt; admin_url( 'admin-ajax.php' )) );
  }
  
  add_action('wp_ajax_nopriv_materialsSearchAjax', 'materialsSearchAjax');
  add_action('wp_ajax_materialsSearchAjax', 'materialsSearchAjax');
  add_filter('posts_where', 'materials_where');
  add_action('wp_enqueue_scripts', 'igs_scripts_styles');
  </code></pre>
  
  <p>Here's my ajax:</p>
  
  <pre><code>(function($) {
    // Trigger submit
    $('.Search-magnifier').on('click', function(){
      var $form = $(this).parent();
      $($form).submit();
    });
  
    $('.Search-form').on('submit', function(event){
      event.preventDefault();
      var $form = $(this);
      var searchKeyword = $($form).find('input[type="search"]').val();
      console.log('keyword: ' + searchKeyword);
      $.ajax({
        type: 'POST',
        url: ajax_data_object.url,
        data: {action: 'materialsSearchAjax', keyword: searchKeyword},
        success: function(textStatus) {
          // update the content
          console.log(textStatus);
          $('.Materials-students').replaceWith(textStatus);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          console.log(errorThrown);
        }
      });
    });
  })(jQuery);
  </code></pre>
  
  <p>The ajax and query work fine if I query all the materials post without filtering the title so the only think that's wrong is the query itself. I followed the guide but been stuck for hours.</p>