Select 2 ajax result with group - php

Question

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 ,
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.

Answer 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});
});

Answer 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;
},
}
});