Select 2 ajax result with group

3 Views

I am trying to display select 2 search ajax results with groups. But it doesn’t display any results. I am using WordPress Ajax for this.

Here is my JS code ,

Read More
jQuery('select.select2-group_filters-dropdown').select2({
            //placeholder: "Select pages / post / categories",

            ajax: {
                url: ajaxurl,
                dataType: 'json',
                method: 'post',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term, // search term
                        page: params.page,
                        action: 'cp_get_posts_by_query'
                    };
                },
                results: function (data, page) {
                        return {results: data};
                },
                processResults: function (data) {

                    return {
                        results: data
                    };
                },
                cache: true
            },
            minimumInputLength: 0,

        });

data I am returning from PHP as, 

$searchString = $_POST['q'];
$childdata = array();

$query = new WP_Query( array( 's' => $searchString ) );

if ( $query->have_posts() ) {
    while ( $query->have_posts() ) {
        $query->the_post();
        $title = get_the_title();
        $ID = get_the_id();
        $childdata[] = array('id' => "post-".$ID, 'text' => $title );
    }
} else {
     $data[] = array('id' => '0', 'text' => 'No results Found');
}

$data = array(
    "text" => "posts",
    "children" => $childdata
);

wp_reset_postdata();

// return the result in json
echo json_encode( $data );
die();

This is not running as expected. It returns zero results. Please help me with this.

Post Views: 3

Related posts

2 comments

  1. If you are getting the data from the back end then the problem is in select2 configuration.
    Try to make ajax call first and then populate select2 with data. Somethong like this (not sure that will work for you, I cannot test it here):

    jQuery.ajax({
url: ajaxurl,
dataType: 'json',
method: 'post',
delay: 250,
data: function (params) {
    return {
        q: params.term, // search term
        page: params.page,
        action: 'cp_get_posts_by_query'
    }
    }
  }).done(function( data ) {

jQuery('select.select2-group_filters-dropdown').select2({ data:data, minimumInputLength: 0});


  });

  2. $('.select2').select2({
                allowClear: true,
                ajax: {
                    url: function (params) {
                        return "api/endpoint/?user=" + params.term;
                    },
                    dataType: 'json',
                    delay: 500,
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item) {
                                return {
    /* NOTE: return in this format i.e. 
    * key = **text** : value = username
    * key = **id**   : value = id
    */
                                    text: item.username,
                                    id: item.id
                                }
                            })
                        };
                    },
                    minimumInputLength: 1,
                    minimumInputLength: 3,
                    cache: true,
                    escapeMarkup: function (markup) {
                        return markup;
                    },
                    templateResult: function (item) {
                        return item.username;
                    },
                    templateSelection: function (item) {
                        return item.username;
                    },
                }
            });

Comments are closed.