Site icon Hip-Hop Website Design and Development

Select2 AJAX and WP Query Returns ALL and does not filter

So I’m a bit stumped here. I regularly use Select2/AJAX/WP_Query to search for and retrieve default WP post-types and my own custom post-types. Almost every site I’ve built over the past few years has included at least one implementation.

But, I’m currently working on a site and searching for results from a custom post-type and it’s just returning everything. There’s no filtering happening. It’s for a scheduling tool and admins are making a schedule (custom post-type) for each month of the year. The schedules are titled as ‘Month Year’, ie. ‘January 2022’.

The problem is that if you search for ‘January’, for example, you’ll get every single schedule that exists returned. February 2022 is included, June 2021, etc.

Genuinely lost as to why the Select2 search function (that works everywhere else) isn’t working here.

I’m using a template_tag() to include a modal dialogue box into certain pages. The modal dialogue box is activated by a button click.

This is the HTML for the Schedule Select2:

echo '<div class="request-row work-type-row">';
    echo '<label for="request_schedule">Schedule</label>';
    echo '<select name="request_schedule" class="request-schedule-select" required><option class="disabled">-----</option></select>';
echo '</div>';

In my javascript I have the following, this instantiates the Select2 and triggers the PHP action that searches:

if( $( '.request-schedule-select' ).length > 0 ) {
    $( function() {
        $( '.request-schedule-select' ).select2( {
            ajax: {
                url: ajaxurl,
                dataType: 'json',
                delay: 250,
                data: function( params ) {
                    return {
                        q: params.term,
                        action: 'search_schedules'
                    };
                },
                processResults: function( data ) {
                    var options = [];
                    if( data ) {
                        jQuery.each( data, function( index, text ) {
                            options.push( { id: text[0], text: text[1]  } );
                        } );
                    }
                    return {
                        results: options
                    };
                },
                cache: true
            },
            minimumInputLength: 3,
            width: '50%',
        } );
} );

From there, the search_schedules PHP action is triggered…

function search_schedules_callback() {
    $return = array();
    $sched_results = new WP_Query( array(
        'search'                => $_GET['q'],
        'post_type'             => 'custom_schedule',
        'post_status'           => 'publish'
    ) );
    if( $sched_results->have_posts() ) :
        while( $sched_results->have_posts() ) : $sched_results->the_post();
            $title = ( mb_strlen( $sched_results->post->post_title ) > 50 ) ? mb_substr( $sched_results->post->post_title, 0, 49 ) . '...' : $sched_results->post->post_title;
            $return[] = array( $sched_results->post->ID, $title );
        endwhile;
    endif;
    echo json_encode( $return );
    wp_die();
}
add_action( 'wp_ajax_search_schedules', 'search_schedules_callback' ); // wp_ajax_{action}
add_action( 'wp_ajax_nopriv_search_schedules', 'search_schedules_callback' ); // wp_ajax_nopriv_{action}

Notes: The entire site is locked down. The only page visible to anyone visiting the URL without logging in is a login form. I’m aware that I’ve not added in a nonce/security check, I’ll be adding that shortly, just want to figure out why the search is returning EVERY single schedule regardless of what I search for.

So it works, kind of, it returns results. I don’t get any errors at all. But what I am getting is extremely inaccurate results. As an example, I just searched for ‘Grapes’ and it returned all of the published schedules. I also searched for ‘Pine Cones’ and it again returned all of the schedules.