select2 search of json results not working

1 Views

I’ve been searching for an answer to this issue for several hours now, but have not found anything that relates to my case.

My setup:
I’ve create a custom TinyMCE button with a popup for a WordPress theme that allows the user to select a custom post type post from a dropdown (in this case a “Customer Review”) and then have its ID inserted into the shortcode. Since the sites that this theme will run on have well over 1,000 reviews, i thought it would be better to json encode the data for the dropdown and then use select2 to search through a list of limited results (paged results) and keep the whole thing from blowing up. All of that is working successfully, except for 2 items:

Read More

  1. The json encoded data shows up, but when i enter a search term, the select2 dropdown shows me a list of all reviews with the first selected. It does not find a result, even though the searched text is in the list

  2. from above, once i enter a search term, select2 shows me all the results instead of just 10, or whatever limit i set.

Here is how i’m json encoding the data (in a file called bpl_content.php): 

$args       = array('post_type' => 'customer_reviews', 'posts_per_page' => -1, 'fields' => 'ids');
$posts      = get_posts($args);

if( $posts ) :

    $reviews = array();

    foreach( $posts as $post ) : setup_postdata( $post );

        $title  = get_the_title();
        $the_ID = get_the_ID();

        $reviews[] = array (
            'id'    => $the_ID,
            'text'  => $title
        );

    endforeach;

endif;

echo json_encode( $reviews )

which returns 

[{"id":12286,"text":"John Doe"},{"id":12285,"text":"Jane Doe"},...]

(There are over 800 items returned, so the above just shows 2, but you get the idea)

Here is the javascript i’m using to get my <select> menu populated with the json data: 

$(".js-data-example-ajax").select2({
    placeholder: "Select a Review",
    ajax: {
        url: "_bpl_content/bpl_content.php",
        type: 'POST',
        params: {
            contentType: 'application/json; charset=utf-8'
        },
        dataType: 'json',
        delay: 250,
        data: function (term, page) {
            return JSON.stringify({ q: term, page_limit: 10 });
        },
        processResults: function (data) {
            return {
                results: data
            };
        },
        cache: true
    },
    minimumInputLength: 3
});

I can’t for the life of me figure out why everything is working, except for the search and pagination. Any ideas?

Post Views: 1

Related posts

1 comment

  1. You do not appear to have any code in your server side code for filtering and paginating results. Select2 realizes that it’s more efficient for this to be done on the server side and expects developers to implement it there. The search term will be passed in as q and the page will be passed in as page (if it’s available).

    If you do not want to implement searching and pagination on the server side, or only have an endpoint which returns all results, you can still work around it. You just need to initialize Select2 with the JSON results as data instead of using the AJAX functionality.

    $.ajax({
  url: "_bpl_content/bpl_content.php",
  type: 'POST',
  contentType: 'application/json; charset=utf-8'
}).then(function (response) {
  $(".js-data-example-ajax").select2({
    placeholder: "Select a Review",
    minimumInputLength: 3,
    data: response
  });  
});

Comments are closed.